:root {
  color-scheme: light;
  --fundo: #f7f8fb;
  --superficie: #ffffff;
  --superficie-suave: #f0edfa;
  --texto: #202126;
  --texto-suave: #777984;
  --linha: #e7e5ee;
  --roxo: #6546b4;
  --roxo-escuro: #432f82;
  --verde: #2f9d6d;
  --verde-suave: #e1f5eb;
  --vermelho: #d86d72;
  --vermelho-suave: #fde9ea;
  --amarelo: #d89732;
  --sombra: 0 16px 45px rgba(50, 35, 95, .08);
  --raio: 20px;
  font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--fundo); color: var(--texto); font-size: 14px; }
body[data-tema="escuro"] { color-scheme: dark; --fundo: #15141b; --superficie: #201e29; --superficie-suave: #2b273c; --texto: #f5f2fb; --texto-suave: #b5afc4; --linha: #373244; --verde-suave: #183a2c; --vermelho-suave: #48282e; --sombra: 0 16px 45px rgba(0,0,0,.25); }
a { color: var(--roxo); text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.pagina-entrada { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 10% 10%, rgba(101,70,180,.14), transparent 32%), var(--fundo); }
.entrada-grade { width: min(1050px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 590px; overflow: hidden; border-radius: 30px; background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.entrada-grade-simples { min-height: 620px; }
.entrada-apresentacao { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 6vw, 72px); color: #fff; background: linear-gradient(145deg, #6546b4, #432f82 70%, #2f9d6d); }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; color: inherit; }
.marca-icone { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.18); font-size: 20px; }
.etiqueta { display: inline-block; color: var(--texto-suave); font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.entrada-apresentacao .etiqueta { color: rgba(255,255,255,.7); }
h1, h2, p { margin-top: 0; }
.entrada-apresentacao h1 { max-width: 520px; margin: 16px 0; font-size: clamp(35px, 5vw, 60px); line-height: 1.04; letter-spacing: -.065em; }
.entrada-apresentacao p { max-width: 450px; margin-bottom: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.beneficios-entrada { display: flex; flex-wrap: wrap; gap: 10px 18px; color: rgba(255,255,255,.78); font-size: 12px; }
.cartao-acesso { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 6vw, 64px); background: var(--superficie); }
.cartao-acesso h2 { margin: 13px 0 27px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.05em; }
.tema-controle { position: absolute; top: 24px; right: 24px; }
.tema-controle button, .link-tema { border: 0; background: transparent; color: var(--texto-suave); padding: 8px; }
.formulario { display: flex; flex-direction: column; gap: 8px; }
.formulario label { margin-top: 8px; color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.formulario input { width: 100%; min-height: 47px; border: 1px solid var(--linha); border-radius: 12px; outline: none; padding: 0 14px; background: var(--fundo); color: var(--texto); }
.formulario input:focus, .campo-registro input:focus { border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(101,70,180,.12); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; border: 0; border-radius: 12px; padding: 0 18px; font-weight: 700; transition: transform .2s, filter .2s; }
.botao:hover { transform: translateY(-1px); filter: brightness(1.04); }
.botao-principal { margin-top: 18px; background: var(--roxo); color: #fff; box-shadow: 0 10px 20px rgba(101,70,180,.22); }
.botao-secundario { background: var(--superficie); color: var(--roxo); border: 1px solid rgba(101,70,180,.23); }
.texto-apoio { margin: 25px 0 0; color: var(--texto-suave); font-size: 12px; text-align: center; }
.texto-apoio a { font-weight: 700; }
.aviso { margin-bottom: 15px; border-radius: 12px; padding: 12px 14px; font-size: 12px; }
.aviso.erro { color: var(--vermelho); background: var(--vermelho-suave); }
.aviso.sucesso { color: var(--verde); background: var(--verde-suave); }
.aviso ul { margin: 0; padding-left: 18px; }

.estrutura-painel { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 30px; padding: 28px 20px; border-right: 1px solid var(--linha); background: var(--superficie); }
.barra-lateral .marca { color: var(--texto); }
.barra-lateral .marca-icone { color: #fff; background: var(--roxo); }
.perfil-resumo { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 15px; background: var(--superficie-suave); }
.perfil-resumo strong, .perfil-resumo small { display: block; }
.perfil-resumo strong { font-size: 12px; }
.perfil-resumo small { margin-top: 3px; color: var(--texto-suave); font-size: 10px; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--roxo), var(--verde)); font-weight: 700; }
.avatar-pequeno { width: 40px; height: 40px; }
.navegacao { display: flex; flex-direction: column; gap: 5px; }
.navegacao a { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; border-radius: 11px; color: var(--texto-suave); font-size: 12px; }
.navegacao a span { font-size: 15px; opacity: .7; }
.navegacao a.ativo, .navegacao a:hover { color: var(--roxo); background: var(--superficie-suave); font-weight: 700; }
.lateral-final { display: flex; flex-direction: column; gap: 11px; margin-top: auto; font-size: 11px; }
.lateral-final a { padding: 8px; color: var(--texto-suave); }
.link-tema { text-align: left; font-size: 11px; }
.conteudo-painel { width: min(1330px, 100%); padding: clamp(24px, 4vw, 52px) clamp(18px, 4vw, 64px); }
.cabecalho-painel { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
.cabecalho-painel h1 { margin: 11px 0 5px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.06em; }
.cabecalho-painel p { margin-bottom: 0; color: var(--texto-suave); }
.acoes-cabecalho { display: flex; align-items: center; gap: 14px; }
.botao-instalar { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; color: var(--roxo); background: var(--superficie); font-weight: 700; font-size: 11px; }
.caixa-registro { display: flex; gap: 18px; padding: 24px; border-radius: var(--raio); background: linear-gradient(130deg, #6546b4, #4d3990); color: #fff; box-shadow: 0 16px 35px rgba(101,70,180,.2); }
.icone-registro { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 45px; border-radius: 15px; background: rgba(255,255,255,.15); font-size: 21px; }
.registro-conteudo { min-width: 0; flex: 1; }
.registro-conteudo .etiqueta { color: rgba(255,255,255,.7); }
.registro-conteudo h2 { margin: 8px 0 3px; font-size: clamp(17px, 2.4vw, 23px); letter-spacing: -.04em; }
.registro-conteudo p { margin-bottom: 15px; color: rgba(255,255,255,.72); font-size: 12px; }
.campo-registro { display: flex; gap: 8px; padding: 6px; border-radius: 13px; background: rgba(255,255,255,.11); }
.campo-registro input { min-width: 0; flex: 1; border: 0; outline: none; padding: 0 10px; color: #fff; background: transparent; }
.campo-registro input::placeholder { color: rgba(255,255,255,.62); }
.campo-registro .botao-principal { margin: 0; min-height: 39px; background: #fff; color: var(--roxo); box-shadow: none; }
.botao-voz { width: 39px; min-width: 39px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.16); font-size: 17px; }
.botao-voz.ouvindo { background: var(--vermelho); animation: pulsa 1.1s infinite; }
.botao-voz.indisponivel { opacity: .5; }
.retorno-registro { min-height: 18px; padding: 7px 3px 0; font-size: 11px; }
.sucesso-texto { color: #b9f1d1; }.erro-texto { color: #ffd1d3; }.carregando { color: rgba(255,255,255,.72); }
.grade-indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 18px 0; }
.indicador, .painel-card { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 5px 18px rgba(30,22,60,.025); }
.indicador { padding: 18px; }.indicador-topo, .cabecalho-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.indicador-topo span:first-child { color: var(--texto-suave); font-size: 11px; }.indicador strong { display: block; margin-top: 12px; font-size: 24px; letter-spacing: -.05em; }.indicador small { display: block; margin-top: 5px; color: var(--texto-suave); font-size: 10px; }
.indicador-destaque { background: var(--superficie-suave); }.icone-positivo, .icone-simbolo, .valor-positivo { color: var(--verde); }.icone-negativo, .valor-negativo { color: var(--vermelho); }.icone-positivo, .icone-negativo, .icone-simbolo { font-size: 18px; font-weight: 700; }
.grade-painel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 13px; margin-bottom: 13px; }
.painel-card { padding: 22px; }.painel-card h2 { margin: 8px 0 10px; font-size: 18px; letter-spacing: -.04em; }.painel-card p { color: var(--texto-suave); line-height: 1.6; font-size: 12px; }
.orientacao-card { background: linear-gradient(145deg, var(--verde-suave), var(--superficie)); border-color: rgba(47,157,109,.22); }.etiqueta-verde { color: var(--verde); }.etiqueta-roxa { color: var(--roxo); }.ponto-pulsante { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 5px rgba(47,157,109,.13); }
.link-acao { padding: 0; border: 0; color: var(--verde); background: transparent; font-size: 12px; font-weight: 700; }.link-acao span { margin-left: 5px; }
.contador { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--roxo); background: var(--superficie-suave); font-size: 11px; font-weight: 700; }.estado-vazio { display: flex; align-items: center; gap: 12px; min-height: 94px; color: var(--texto-suave); }.estado-vazio > span { color: var(--roxo); font-size: 26px; }.estado-vazio p { margin: 0; }.estado-vazio small { font-size: 10px; }.lista-atencoes { display: flex; flex-direction: column; gap: 12px; }.linha-atencao { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }.linha-atencao:last-child { border-bottom: 0; }.linha-atencao strong, .linha-atencao small { display: block; }.linha-atencao strong { font-size: 12px; }.linha-atencao small { margin-top: 3px; color: var(--texto-suave); font-size: 10px; }.linha-atencao b { color: var(--vermelho); font-size: 12px; white-space: nowrap; }
.historico-card { margin-bottom: 13px; }.texto-menor { color: var(--texto-suave); font-size: 10px; }.tabela-responsiva { overflow-x: auto; }.tabela-responsiva table { width: 100%; border-collapse: collapse; min-width: 550px; }.tabela-responsiva th { color: var(--texto-suave); font-size: 10px; font-weight: 600; text-align: left; }.tabela-responsiva td, .tabela-responsiva th { padding: 12px 8px; border-bottom: 1px solid var(--linha); }.tabela-responsiva td { font-size: 12px; }.alinha-direita { text-align: right !important; }.ponto-tipo { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }.ponto-receita { background: var(--verde); }.ponto-despesa { background: var(--vermelho); }
.previsualizacao-plano { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px; border-radius: var(--raio); color: #fff; background: linear-gradient(135deg, #322560, #6546b4); }.previsualizacao-plano h2 { margin: 8px 0 6px; font-size: 20px; letter-spacing: -.04em; }.previsualizacao-plano p { max-width: 650px; margin: 0; color: rgba(255,255,255,.73); font-size: 12px; line-height: 1.5; }.previsualizacao-plano .botao-secundario { flex: 0 0 auto; }.rodape-painel { padding: 24px 0 5px; color: var(--texto-suave); font-size: 10px; text-align: center; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 5px rgba(216,109,114,.22); } }

@media (max-width: 900px) { .estrutura-painel { grid-template-columns: 78px minmax(0, 1fr); }.barra-lateral { align-items: center; padding: 22px 12px; }.barra-lateral .marca { font-size: 0; }.barra-lateral .marca-icone { font-size: 20px; }.perfil-resumo { padding: 6px; background: transparent; }.perfil-resumo > div:last-child, .navegacao a span, .navegacao a:not(.ativo)::after, .lateral-final span { display: none; }.navegacao { width: 100%; }.navegacao a { justify-content: center; font-size: 0; }.navegacao a::first-letter { font-size: 18px; }.lateral-final { align-items: center; }.link-tema { font-size: 18px; }.lateral-final > a { font-size: 0; }.lateral-final > a::first-letter { font-size: 18px; } }
@media (max-width: 700px) { .pagina-entrada { padding: 0; display: block; }.entrada-grade { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; }.entrada-apresentacao { min-height: 42vh; padding: 30px 24px; gap: 35px; }.entrada-apresentacao h1 { font-size: 38px; }.cartao-acesso { min-height: 58vh; padding: 32px 24px; }.cabecalho-painel { flex-direction: column; }.acoes-cabecalho { position: absolute; top: 24px; right: 18px; }.grade-indicadores, .grade-painel { grid-template-columns: 1fr; }.caixa-registro { padding: 17px; }.icone-registro { display: none; }.campo-registro { flex-wrap: wrap; }.campo-registro input { flex-basis: calc(100% - 48px); min-height: 39px; }.campo-registro .botao-registrar { flex: 1; }.previsualizacao-plano { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .estrutura-painel { display: block; }.barra-lateral { position: sticky; z-index: 5; top: 0; height: auto; flex-direction: row; justify-content: space-between; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--linha); }.barra-lateral .marca { font-size: 15px; }.barra-lateral .marca-icone { width: 29px; height: 29px; font-size: 17px; }.perfil-resumo, .lateral-final { display: none; }.navegacao { width: auto; flex-direction: row; }.navegacao a { display: none; }.navegacao a.ativo { display: flex; padding: 8px; }.conteudo-painel { padding: 24px 14px; }.cabecalho-painel h1 { font-size: 32px; }.texto-menor { display: none; }.duas-colunas { grid-template-columns: 1fr; gap: 0; } }