:root { --fz-hue: 150; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: oklch(97% 0.012 var(--fz-hue));
  color: oklch(22% 0.02 var(--fz-hue));
  overflow-x: hidden;
}
h1, h2, h3, .logo, .sidebar-logo { font-family: 'Sora', sans-serif; }
a { color: oklch(40% 0.13 var(--fz-hue)); text-decoration: none; }
a:hover { color: oklch(32% 0.14 var(--fz-hue)); }

/* ===== Botões ===== */
.btn {
  display: inline-block;
  background: oklch(45% 0.13 var(--fz-hue));
  color: #fff;
  padding: 11px 22px;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: oklch(40% 0.14 var(--fz-hue)); color: #fff; }
.btn-secundario { background: oklch(93% 0.01 var(--fz-hue)); color: oklch(30% 0.02 var(--fz-hue)); }
.btn-secundario:hover { background: oklch(88% 0.02 var(--fz-hue)); color: oklch(30% 0.02 var(--fz-hue)); }
.btn-perigo { background: oklch(55% 0.19 25); }
.btn-perigo:hover { background: oklch(48% 0.19 25); }
.btn-pequeno { padding: 6px 14px; font-size: 13px; }

/* ===== Landing / páginas públicas ===== */
.landing-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(99% 0.002 145 / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(92% 0.01 var(--fz-hue));
}
.landing-header .wrap {
  max-width: 1200px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: oklch(24% 0.014 var(--fz-hue)); }
.logo span { color: oklch(45% 0.14 var(--fz-hue)); }
.hero {
  max-width: none; margin: 0; padding: 70px 32px 80px; display: grid; grid-template-columns: 1fr; gap: 40px;
  background: linear-gradient(135deg, oklch(90% 0.07 var(--fz-hue)) 0%, oklch(94% 0.05 calc(var(--fz-hue) + 40)) 55%, oklch(97% 0.012 var(--fz-hue)) 100%);
  border-bottom: 1px solid oklch(88% 0.03 var(--fz-hue));
}
.hero > * { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
.hero h1 { font-size: 42px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px; color: oklch(20% 0.03 var(--fz-hue)); }
.hero p { font-size: 18px; line-height: 1.6; color: oklch(35% 0.03 var(--fz-hue)); max-width: 560px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: oklch(55% 0.16 var(--fz-hue)); border: 1px solid oklch(50% 0.17 var(--fz-hue));
  color: #fff; padding: 8px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 700; margin-bottom: 20px;
  box-shadow: 0 8px 20px -6px oklch(45% 0.15 var(--fz-hue) / 0.5);
}

.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: oklch(97% 0.004 var(--fz-hue)); padding: 24px;
}
.auth-card {
  background: #fff; border-radius: 16px; box-shadow: 0 10px 40px oklch(0% 0 0 / 0.08);
  padding: 40px; width: 100%; max-width: 420px;
}
.auth-card h1 { font-size: 24px; margin: 0 0 6px; }
.auth-card p.subtitulo { color: oklch(48% 0.01 var(--fz-hue)); font-size: 14px; margin: 0 0 26px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 13px; border: 1px solid oklch(88% 0.01 var(--fz-hue));
  border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: oklch(55% 0.13 var(--fz-hue));
}
.iti { width: 100%; }
.iti__country-list { max-height: 200px; z-index: 999; border-radius: 8px; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12); }
.iti input.iti__tel-input, .campo .iti input { border-radius: 8px; }

.radio-opcoes { display: flex; flex-direction: column; gap: 10px; }
.radio-opcoes label {
  display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px;
  border: 1px solid oklch(88% 0.01 var(--fz-hue)); border-radius: 8px; padding: 12px; cursor: pointer;
}
.radio-opcoes input { width: auto; margin-top: 3px; }

.gateway-opcoes { display: flex; gap: 14px; flex-wrap: wrap; }
.gateway-opcao {
  flex: 1; min-width: 220px; position: relative; display: flex; flex-direction: column; gap: 4px;
  border: 2px solid oklch(88% 0.01 var(--fz-hue)); border-radius: 12px; padding: 16px 18px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gateway-opcao:hover { border-color: oklch(70% 0.06 var(--fz-hue)); }
.gateway-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.gateway-opcao-nome { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; }
.gateway-opcao-desc { font-size: 12.5px; color: oklch(48% 0.01 var(--fz-hue)); }
.gateway-opcao-ativa { border-color: oklch(55% 0.15 var(--fz-hue)); background: oklch(96% 0.03 var(--fz-hue)); }
.gateway-opcao-ativa .gateway-opcao-nome { color: oklch(35% 0.13 var(--fz-hue)); }
.gateway-opcao-badge {
  position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 700;
  color: oklch(38% 0.14 var(--fz-hue)); background: oklch(93% 0.05 var(--fz-hue));
  padding: 3px 9px; border-radius: 999px;
}
.auth-card .btn { width: 100%; text-align: center; padding: 12px; margin-top: 6px; }
.auth-links { text-align: center; margin-top: 18px; font-size: 13.5px; color: oklch(48% 0.01 var(--fz-hue)); }

.auth-card-login { max-width: 450px; }
.otp-destino {
  display:flex; align-items:flex-start; gap:12px; margin:0 0 22px; padding:14px;
  background:color-mix(in srgb,var(--fz-accent,#247575) 8%,var(--fz-surface,#fff));
  border:1px solid color-mix(in srgb,var(--fz-accent,#247575) 22%,var(--fz-border,#d8e2e1)); border-radius:12px;
}
.otp-destino p { margin:0; color:var(--fz-muted,oklch(42% 0.01 var(--fz-hue))); font-size:13px; line-height:1.55; }
.otp-destino strong { color:var(--fz-text,oklch(20% 0.03 var(--fz-hue))); font-size:14px; letter-spacing:.02em; }
.otp-destino-icone { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; }
.otp-destino-icone svg { width:25px; height:25px; fill:#25d366; }
.otp-fieldset { border:0; margin:0 0 16px; padding:0; min-width:0; }
.otp-fieldset legend { width:100%; margin:0 0 9px; padding:0; font-size:13px; font-weight:600; }
.otp-inputs { display:grid; grid-template-columns:repeat(3,minmax(42px,1fr)) 18px repeat(3,minmax(42px,1fr)); align-items:center; gap:7px; }
.otp-inputs input {
  width:100%; min-width:0; height:54px; padding:0; border:1px solid var(--fz-border,oklch(86% 0.01 var(--fz-hue)));
  border-radius:10px; background:var(--fz-surface,#fff); color:var(--fz-text,#1a2332); text-align:center;
  font-family:'Sora',sans-serif; font-size:23px; font-weight:700; caret-color:var(--fz-accent,#247575);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.otp-inputs input:focus { outline:0; border-color:var(--fz-accent,#247575); box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-accent,#247575) 16%,transparent); transform:translateY(-1px); }
.otp-separador { color:var(--fz-muted,#66737c); text-align:center; font-size:22px; }
.otp-reenviar-form { margin-top:12px; text-align:center; }
.otp-reenviar {
  appearance:none; border:0; background:transparent; color:var(--fz-accent,#247575); padding:6px;
  font:600 13px/1.4 'Inter',sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.otp-reenviar:disabled { color:var(--fz-muted,#66737c); cursor:not-allowed; text-decoration:none; opacity:.82; }
.auth-alternativa { display:flex; align-items:center; gap:10px; margin:17px 0 13px; color:var(--fz-muted,#66737c); font-size:12px; }
.auth-alternativa::before,.auth-alternativa::after { content:""; height:1px; background:var(--fz-border,#d8e2e1); flex:1; }
.auth-metodo-link {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 13px;
  border:1px solid var(--fz-border,#d8e2e1); border-radius:9px; color:var(--fz-text,#1a2332);
  font-size:13px; font-weight:600; text-decoration:none; transition:border-color .15s,background .15s;
}
.auth-metodo-link:hover { border-color:var(--fz-accent,#247575); background:color-mix(in srgb,var(--fz-accent,#247575) 6%,transparent); }
.auth-metodo-link svg { width:18px; height:18px; fill:var(--fz-accent,#247575); }
.auth-trocar-numero { display:block; margin-top:12px; text-align:center; color:var(--fz-muted,#66737c); font-size:12.5px; }
.campo-senha-login { animation:fz-auth-field-in .18s ease-out both; }
@keyframes fz-auth-field-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

@media (max-width:480px) {
  .auth-card-login { padding:28px 20px; }
  .otp-inputs { grid-template-columns:repeat(3,minmax(36px,1fr)) 12px repeat(3,minmax(36px,1fr)); gap:5px; }
  .otp-inputs input { height:49px; font-size:20px; }
}

.alerta { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.alerta-erro { background: oklch(95% 0.05 25); color: oklch(40% 0.15 25); border: 1px solid oklch(85% 0.08 25); }
.alerta-sucesso { background: oklch(95% 0.05 var(--fz-hue)); color: oklch(35% 0.13 var(--fz-hue)); border: 1px solid oklch(85% 0.08 var(--fz-hue)); }
.alerta-aviso { background:oklch(96% 0.05 85); color:oklch(38% 0.10 65); border:1px solid oklch(84% 0.09 80); }

/* ===== Painel logado (app shell) ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid oklch(92% 0.01 var(--fz-hue));
  display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh;
}
.sidebar-logo { font-size: 20px; font-weight: 700; padding: 0 10px 20px; }
.sidebar-logo span { color: oklch(45% 0.14 var(--fz-hue)); }
.sidebar-teste {
  background: oklch(95% 0.045 var(--fz-hue)); color: oklch(38% 0.12 var(--fz-hue)); font-size: 12.5px;
  padding: 10px 12px; border-radius: 8px; margin: 0 6px 16px;
}
.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding-right: 3px; scrollbar-width: thin;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  color: oklch(30% 0.02 var(--fz-hue)); font-size: 14px; font-weight: 500; padding: 10px 12px; border-radius: 8px;
}
.sidebar-nav a span { min-width: 0; }
.menu-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.menu-toggle-icon { display: block; width: 24px; height: 24px; }
.sidebar-nav a:hover { background: oklch(96% 0.01 var(--fz-hue)); }
.sidebar-nav a.active { background: oklch(93% 0.05 var(--fz-hue)); color: oklch(35% 0.13 var(--fz-hue)); font-weight: 700; }
.sidebar-usuario { padding: 12px; font-size: 13px; color: oklch(48% 0.01 var(--fz-hue)); border-top: 1px solid oklch(92% 0.01 var(--fz-hue)); }

.conteudo { flex: 1; min-width: 0; padding: 32px 40px; max-width: 1180px; }
.conteudo h1 { font-size: 26px; margin: 0 0 6px; }
.conteudo .subtitulo { color: oklch(48% 0.01 var(--fz-hue)); font-size: 14px; margin: 0 0 28px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 30px; }
.card {
  background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px oklch(0% 0 0 / 0.05);
  border: 1px solid oklch(93% 0.01 var(--fz-hue));
}
.card .rotulo { font-size: 12.5px; color: oklch(48% 0.01 var(--fz-hue)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.card .valor { font-size: 26px; font-weight: 800; font-family: 'Sora', sans-serif; margin-top: 6px; }
.valor.positivo { color: oklch(45% 0.13 var(--fz-hue)); }
.valor.negativo { color: oklch(50% 0.18 25); }

.painel-box {
  background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 24px;
  border: 1px solid oklch(93% 0.01 var(--fz-hue));
}
.painel-box h2 { font-size: 17px; margin: 0 0 16px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 10px; border-bottom: 1px solid oklch(93% 0.01 var(--fz-hue)); text-align: left; }
th { background: oklch(97% 0.005 var(--fz-hue)); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.02em; color: oklch(45% 0.01 var(--fz-hue)); }
.tabela-acoes a { margin-right: 12px; font-size: 13px; }
.tabela-acoes a.excluir { color: oklch(50% 0.18 25); }
.tabela-acoes .link-como-botao { appearance:none; border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; text-decoration:underline; }
.tabela-acoes .link-como-botao.excluir { color:oklch(50% 0.18 25); }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: end; }
.filtros .campo { margin-bottom: 0; min-width: 160px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge-verde { background: oklch(93% 0.05 var(--fz-hue)); color: oklch(35% 0.13 var(--fz-hue)); }
.badge-vermelho { background: oklch(93% 0.05 25); color: oklch(45% 0.15 25); }
.badge-cinza { background: oklch(93% 0.005 var(--fz-hue)); color: oklch(45% 0.01 var(--fz-hue)); }
.badge-amarelo { background: oklch(93% 0.07 90); color: oklch(45% 0.1 80); }

.form-linha { display: flex; gap: 14px; flex-wrap: wrap; }
.form-linha .campo { flex: 1; min-width: 180px; }

.filtro-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filtro-tab {
  display: inline-block; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: oklch(45% 0.01 var(--fz-hue)); background: oklch(95% 0.005 var(--fz-hue));
  border: 1px solid oklch(90% 0.01 var(--fz-hue));
}
.filtro-tab.ativo { background: oklch(60% 0.15 var(--fz-hue)); color: #fff; border-color: transparent; }

/* ===== Gráficos (relatórios) — modelo definido por Victor em grafio.html ===== */
.finance-card {
  background: linear-gradient(135deg, oklch(100% 0 0), oklch(97% 0.02 var(--fz-hue)));
  border-radius: 24px; padding: 26px 28px; box-shadow: 0 20px 45px oklch(30% 0.05 var(--fz-hue) / 0.12);
  color: oklch(28% 0.05 var(--fz-hue)); margin-bottom: 20px;
}
.finance-card .top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.finance-card .top > span, .finance-card .top small { color: oklch(52% 0.01 var(--fz-hue)); font-size: 14px; }
.finance-card .top h2 { font-family: 'Sora', sans-serif; font-size: 38px; margin: 8px 0; }
.finance-card .badge { background: oklch(60% 0.15 var(--fz-hue)); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.finance-card .badge.negativo { background: oklch(58% 0.18 25); }

.progress-box { margin: 22px 0 4px; }
.progress-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; }
.progress-info strong { font-variant-numeric: tabular-nums; }
.progress { height: 14px; background: oklch(93% 0.02 var(--fz-hue)); border-radius: 20px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, oklch(45% 0.14 var(--fz-hue)), oklch(60% 0.15 var(--fz-hue))); border-radius: 20px; }
.progress > div.negativo { background: linear-gradient(90deg, oklch(45% 0.16 25), oklch(60% 0.18 25)); }

.days-chart { height: 220px; display: flex; align-items: flex-end; gap: 14px; padding: 0 4px 30px; }
.days-chart-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.days-chart-bar {
  width: 100%; max-width: 26px; margin: 0 auto;
  border-radius: 8px 8px 4px 4px; position: relative; min-height: 6px;
  background: linear-gradient(180deg, oklch(72% 0.13 var(--fz-hue)), oklch(45% 0.14 var(--fz-hue)));
  transition: transform .2s;
}
.days-chart-bar.despesa { background: linear-gradient(180deg, oklch(70% 0.16 25), oklch(48% 0.17 25)); }
.days-chart-item:hover .days-chart-bar { transform: translateY(-6px); }
.days-chart-valor {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: oklch(35% 0.02 var(--fz-hue)); white-space: nowrap;
}
.days-chart-label {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: oklch(52% 0.01 var(--fz-hue)); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}
.days-chart-titulo { font-size: 13.5px; font-weight: 700; color: oklch(38% 0.03 var(--fz-hue)); margin: 0 0 4px; }
.days-chart-titulo.despesa { color: oklch(42% 0.16 25); }

.kpi-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.kpi-card {
  flex: 1; min-width: 130px; background: oklch(97.5% 0.005 var(--fz-hue));
  border: 1px solid oklch(91% 0.008 var(--fz-hue)); border-radius: 10px; padding: 14px 16px;
}
.kpi-card-destaque { background: oklch(96% 0.02 var(--fz-hue)); border-color: oklch(80% 0.06 var(--fz-hue)); }
.kpi-card-rotulo { font-size: 12px; color: oklch(50% 0.01 var(--fz-hue)); margin-bottom: 6px; }
.kpi-card-valor { font-size: 18px; font-weight: 700; color: oklch(28% 0.02 var(--fz-hue)); font-variant-numeric: tabular-nums; }
.kpi-card-valor.kpi-card-vazio { font-size: 13px; font-weight: 400; color: oklch(60% 0.01 var(--fz-hue)); }
.kpi-card-badge { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.kpi-card-badge.positivo { color: oklch(40% 0.13 var(--fz-hue)); background: oklch(90% 0.05 var(--fz-hue)); }
.kpi-card-badge.negativo { color: oklch(42% 0.16 25); background: oklch(90% 0.06 25); }

.grafico-legenda { display: flex; gap: 18px; margin-bottom: 12px; }
.grafico-legenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: oklch(40% 0.01 var(--fz-hue)); }
.grafico-legenda-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafico-legenda-linha-mini { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.grafico-legenda-receita { background: oklch(55% 0.14 var(--fz-hue)); }
.grafico-legenda-despesa { background: oklch(58% 0.18 25); }

.grafico-tabela-toggle { margin-top: 16px; }
.grafico-tabela-toggle summary { cursor: pointer; font-size: 13px; color: oklch(45% 0.13 var(--fz-hue)); font-weight: 600; }
.grafico-tabela-toggle table { margin-top: 10px; }

@media (max-width: 600px) {
  .grafico-categoria-linha { grid-template-columns: 90px 1fr 74px; gap: 8px; }
}

.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-scroll table { min-width: 560px; }

.topbar-mobile { display: none; }
.overlay-menu { display: none; }

@media (max-width: 860px) {
  .topbar-mobile {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 80;
    background: #fff; border-bottom: 1px solid oklch(92% 0.01 var(--fz-hue));
    padding: 14px 16px;
  }
  .topbar-mobile .logo-mobile { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
  .topbar-mobile .logo-mobile span { color: oklch(45% 0.14 var(--fz-hue)); }
  .botao-menu { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px; color: oklch(24% 0.014 var(--fz-hue)); }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 90; width: 240px;
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  .sidebar.aberta { transform: translateX(0); }

  .overlay-menu.ativo { display: block; position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); z-index: 85; }

  .conteudo { padding: 20px; padding-top: 84px; }
  .hero { padding: 40px 20px; }
}

/* ===== Componentes administrativos e analytics ===== */
.conteudo { width: 100%; max-width: 1440px; }
.painel-box, .card { border-radius: 16px; box-shadow: 0 10px 35px oklch(25% 0.03 var(--fz-hue) / 0.045); }
.cabecalho-pagina, .cabecalho-secao { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.cabecalho-secao { align-items:center; margin-bottom:18px; }
.cabecalho-secao h2 { margin:0 0 5px; }
.cabecalho-secao p, .texto-secundario { margin:0; color:oklch(50% 0.015 var(--fz-hue)); font-size:12.5px; line-height:1.5; }
.ajuda-campo { display:block; margin-top:6px; color:oklch(52% 0.01 var(--fz-hue)); font-size:11.5px; line-height:1.4; }
.acoes-formulario { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.acoes-formulario small { max-width:520px; color:oklch(50% 0.01 var(--fz-hue)); line-height:1.5; }
.form-acao-inline { display:inline-block; margin:0 9px 7px 0; }
.form-acao-inline .link-como-botao { appearance:none; border:0; padding:0; background:none; color:oklch(40% 0.13 var(--fz-hue)); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; }
.form-acao-inline .link-como-botao.excluir, .backups-acoes .excluir { color:oklch(50% 0.18 25); }

.painel-expansivel { padding:0; overflow:hidden; }
.painel-expansivel > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; padding:20px 24px; }
.painel-expansivel > summary::-webkit-details-marker { display:none; }
.painel-expansivel > summary strong { display:block; font:700 17px 'Sora',sans-serif; }
.painel-expansivel > summary small { display:block; margin-top:4px; color:oklch(50% 0.01 var(--fz-hue)); }
.painel-expansivel[open] > summary { border-bottom:1px solid oklch(91% 0.012 var(--fz-hue)); background:oklch(98% 0.01 var(--fz-hue)); }
.painel-expansivel[open] > summary .btn { display:none; }
.form-novo-usuario { padding:24px; }
.form-novo-usuario .campo-maior { flex:1.35; }
.campo-desabilitado { opacity:.48; }
.check-elegante { display:flex; align-items:flex-start; gap:10px; width:max-content; max-width:100%; padding:12px 14px; border:1px solid oklch(89% 0.012 var(--fz-hue)); border-radius:12px; cursor:pointer; }
.check-elegante input { margin-top:3px; accent-color:oklch(48% 0.14 var(--fz-hue)); }
.check-elegante span, .check-elegante small { display:block; }
.check-elegante small { margin-top:3px; color:oklch(50% 0.01 var(--fz-hue)); }

.retencao-form { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.retencao-form .campo { margin:0; width:150px; }
.backups-acoes { white-space:nowrap; }

.cabecalho-financeiro { margin-bottom:24px; }
.cabecalho-financeiro .subtitulo { margin-bottom:0; }
.filtro-periodo { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid oklch(90% 0.012 var(--fz-hue)); border-radius:999px; padding:6px 8px 6px 15px; box-shadow:0 7px 24px oklch(25% 0.03 var(--fz-hue) / .06); }
.filtro-periodo label { font-size:12px; font-weight:700; color:oklch(48% 0.02 var(--fz-hue)); }
.filtro-periodo select { border:0; background:oklch(95% 0.02 var(--fz-hue)); border-radius:999px; padding:8px 12px; font:600 12.5px 'Inter',sans-serif; color:oklch(30% 0.03 var(--fz-hue)); outline:none; }
.finance-hero { display:grid; grid-template-columns:minmax(260px,1.2fr) minmax(380px,1fr); gap:28px; padding:30px; margin-bottom:18px; border-radius:24px; color:#fff; background:linear-gradient(125deg,oklch(36% .15 var(--fz-hue)),oklch(51% .17 calc(var(--fz-hue) + 35))); box-shadow:0 22px 50px oklch(30% .10 var(--fz-hue) / .22); overflow:hidden; position:relative; }
.finance-hero::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-80px; top:-140px; background:oklch(100% 0 0 / .10); }
.finance-hero > div:first-child { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; z-index:1; }
.finance-hero .eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.1em; opacity:.78; font-weight:700; }
.finance-hero > div > strong { font:800 clamp(30px,4vw,48px) 'Sora',sans-serif; letter-spacing:-.04em; margin:8px 0; }
.variacao { font-size:12px; font-weight:700; padding:5px 9px; border-radius:999px; }
.finance-hero .variacao.positivo { background:oklch(90% .13 150 / .2); color:oklch(94% .10 150); }
.finance-hero .variacao.negativo { background:oklch(83% .17 25 / .22); color:oklch(94% .08 25); }
.finance-hero-resumo { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; align-self:stretch; background:oklch(100% 0 0 / .12); border:1px solid oklch(100% 0 0 / .14); border-radius:18px; overflow:hidden; position:relative; z-index:1; }
.finance-hero-resumo div { display:flex; flex-direction:column; justify-content:center; padding:20px 16px; background:oklch(20% .05 var(--fz-hue) / .09); }
.finance-hero-resumo span { font-size:11px; opacity:.72; }
.finance-hero-resumo strong { font:700 16px 'Sora',sans-serif; margin-top:6px; }
.metric-grid { display:grid; grid-template-columns:repeat(6,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.metric-card { display:flex; flex-direction:column; min-height:132px; padding:18px; background:#fff; border:1px solid oklch(92% .012 var(--fz-hue)); border-radius:16px; box-shadow:0 8px 28px oklch(25% .03 var(--fz-hue) / .045); }
.metric-card > span { color:oklch(49% .015 var(--fz-hue)); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.metric-card > strong { margin:9px 0 7px; font:750 21px 'Sora',sans-serif; letter-spacing:-.03em; }
.metric-card > small { margin-top:auto; color:oklch(51% .01 var(--fz-hue)); font-size:11.5px; line-height:1.35; }
.metric-card > small.positivo { color:oklch(42% .13 150); }
.metric-card > small.negativo { color:oklch(50% .17 25); }
.metric-card.metric-alerta { border-color:oklch(78% .10 25); background:oklch(98% .02 25); }
.dashboard-grid { display:grid; gap:18px; align-items:stretch; }
.dashboard-grid-principal { grid-template-columns:minmax(0,2fr) minmax(270px,.8fr); }
.dashboard-grid-duplo { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grafico-card { min-width:0; }
.line-chart { width:100%; min-height:260px; overflow:hidden; }
.line-chart svg { display:block; width:100%; height:auto; min-height:260px; overflow:visible; }
.line-chart-grid { stroke:oklch(90% .01 var(--fz-hue)); stroke-width:1; }
.line-chart-axis, .line-chart-label { fill:oklch(50% .01 var(--fz-hue)); font:11px 'Inter',sans-serif; }
.line-chart-label { text-anchor:middle; }
.line-chart-area { fill:oklch(62% .15 var(--fz-hue) / .14); }
.line-chart-line { fill:none; stroke:oklch(50% .16 var(--fz-hue)); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.line-chart-point circle { fill:#fff; stroke:oklch(50% .16 var(--fz-hue)); stroke-width:3; vector-effect:non-scaling-stroke; transition:r .15s; }
.line-chart-point:hover circle { r:8; }
.insight-panel { display:flex; flex-direction:column; }
.insight-item { border-left:3px solid oklch(62% .13 var(--fz-hue)); padding:11px 0 11px 14px; margin-bottom:11px; }
.insight-item.atencao { border-left-color:oklch(60% .18 25); }
.insight-item span,.insight-item strong,.insight-item small { display:block; }
.insight-item span { color:oklch(50% .01 var(--fz-hue)); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.insight-item strong { margin:4px 0; font-size:14px; }
.insight-item small { color:oklch(51% .01 var(--fz-hue)); line-height:1.45; }
.donut-layout { display:grid; grid-template-columns:180px minmax(180px,1fr); align-items:center; gap:28px; min-height:250px; }
.donut-chart { width:176px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .2); }
.donut-chart > div { width:104px; aspect-ratio:1; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 22px oklch(20% .02 var(--fz-hue) / .1); }
.donut-chart strong { max-width:90px; overflow:hidden; text-overflow:ellipsis; font:750 16px 'Sora',sans-serif; white-space:nowrap; }
.donut-chart span { color:oklch(52% .01 var(--fz-hue)); font-size:10px; margin-top:3px; }
.donut-legend { display:flex; flex-direction:column; gap:11px; }
.donut-legend-item { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:9px; font-size:12.5px; }
.donut-legend-item i { width:9px; height:9px; border-radius:50%; }
.donut-legend-item strong { font-size:12px; }
.donut-legend-item small { color:oklch(52% .01 var(--fz-hue)); font-weight:500; }
.grafico-vazio { display:grid; place-items:center; min-height:180px; color:oklch(52% .01 var(--fz-hue)); font-size:13px; border:1px dashed oklch(87% .015 var(--fz-hue)); border-radius:14px; }
.ranking-lista { display:flex; flex-direction:column; gap:15px; }
.ranking-item { display:grid; grid-template-columns:1fr auto; gap:8px 14px; }
.ranking-item > div { display:flex; flex-direction:column; }
.ranking-item > div:nth-child(2) { text-align:right; }
.ranking-item span { color:oklch(52% .01 var(--fz-hue)); font-size:11px; margin-top:3px; }
.ranking-bar { grid-column:1/-1; height:7px; border-radius:999px; background:oklch(93% .015 var(--fz-hue)); overflow:hidden; }
.ranking-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,oklch(48% .15 var(--fz-hue)),oklch(66% .16 calc(var(--fz-hue) + 30))); }
.ranking-posicao { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:oklch(94% .035 var(--fz-hue)); color:oklch(40% .12 var(--fz-hue)); font-weight:800; }
.gateway-chip { display:inline-flex; padding:4px 8px; background:oklch(95% .02 240); color:oklch(42% .10 240); border-radius:7px; font-size:11px; font-weight:700; white-space:nowrap; }

@media (max-width:1200px) {
  .metric-grid { grid-template-columns:repeat(3,minmax(150px,1fr)); }
  .finance-hero { grid-template-columns:1fr; }
}
@media (max-width:980px) {
  .dashboard-grid-principal,.dashboard-grid-duplo { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .conteudo { padding-left:16px; padding-right:16px; }
  .cabecalho-pagina { display:block; }
  .cabecalho-pagina .filtro-periodo { width:max-content; max-width:100%; margin-top:14px; }
  .filtro-periodo select { min-width:0; max-width:190px; }
  .metric-grid { grid-template-columns:1fr; }
  .metric-card { min-height:112px; }
  .finance-hero { padding:22px; }
  .finance-hero,.finance-hero-resumo,.dashboard-grid,.painel-box { min-width:0; max-width:100%; }
  .finance-hero-resumo { grid-template-columns:1fr; }
  .finance-hero-resumo div { padding:13px 15px; }
  .donut-layout { grid-template-columns:1fr; justify-items:center; }
  .donut-legend { width:100%; }
  .painel-expansivel > summary { padding:17px; }
  .form-novo-usuario { padding:17px; }
  .form-linha { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  .form-linha .campo,.form-novo-usuario .campo-maior { width:100%; min-width:0; }
  .campo input,.campo select,.campo textarea { min-width:0; max-width:100%; }
  .check-elegante { width:100%; }
  .acoes-formulario { align-items:flex-start; flex-direction:column; }
  .retencao-form { width:100%; }
}

/* ===== Temas selecionáveis do sistema ===== */
html { color-scheme: var(--fz-color-scheme, light); }
body { font-family:var(--fz-font-body,'Inter',sans-serif); background:var(--fz-bg,oklch(97% .012 var(--fz-hue))); color:var(--fz-text,oklch(22% .02 var(--fz-hue))); transition:background-color .2s,color .2s; }
h1,h2,h3,.logo,.sidebar-logo,.topbar-mobile .logo-mobile { font-family:var(--fz-font-heading,'Sora',sans-serif); }
a { color:var(--fz-primary,oklch(40% .13 var(--fz-hue))); }
a:hover { color:var(--fz-accent,oklch(32% .14 var(--fz-hue))); }
.btn { background:var(--fz-accent,oklch(45% .13 var(--fz-hue))); color:var(--fz-on-accent,#fff); box-shadow:0 8px 20px color-mix(in srgb,var(--fz-accent) 25%,transparent); }
.btn:hover { background:color-mix(in srgb,var(--fz-accent) 82%,var(--fz-primary)); color:var(--fz-on-accent,#fff); transform:translateY(-1px); }
.btn-secundario { background:color-mix(in srgb,var(--fz-secondary) 22%,var(--fz-surface)); color:var(--fz-text); box-shadow:none; }
.btn-secundario:hover { background:color-mix(in srgb,var(--fz-secondary) 38%,var(--fz-surface)); color:var(--fz-text); }
.sidebar,.topbar-mobile,.auth-card,.card,.painel-box,.metric-card,.donut-chart > div { background:var(--fz-surface,#fff); border-color:var(--fz-border); color:var(--fz-text); }
.sidebar { border-right-color:var(--fz-border); box-shadow:8px 0 32px color-mix(in srgb,var(--fz-primary) 7%,transparent); }
.sidebar-logo span,.logo span,.topbar-mobile .logo-mobile span { color:var(--fz-accent); }
.sidebar-nav a { color:var(--fz-text); }
.sidebar-nav a:hover { background:color-mix(in srgb,var(--fz-secondary) 13%,var(--fz-surface)); }
.sidebar-nav a.active { background:color-mix(in srgb,var(--fz-highlight) 34%,var(--fz-surface)); color:var(--fz-primary); box-shadow:inset 3px 0 0 var(--fz-accent); }
.sidebar-usuario,.sidebar-teste { border-color:var(--fz-border); color:var(--fz-muted); }
.sidebar-teste { background:color-mix(in srgb,var(--fz-highlight) 20%,var(--fz-surface)); }
.conteudo .subtitulo,.texto-secundario,.cabecalho-secao p,.ajuda-campo,.acoes-formulario small,.painel-expansivel > summary small,.metric-card > small,.insight-item small,.donut-chart span,.donut-legend-item small,.grafico-vazio { color:var(--fz-muted); }
.campo input,.campo select,.campo textarea,.filtro-periodo,.check-elegante { background:var(--fz-surface); color:var(--fz-text); border-color:var(--fz-border); }
.campo input:focus,.campo select:focus,.campo textarea:focus { border-color:var(--fz-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-accent) 18%,transparent); }
.painel-expansivel[open] > summary,th { background:color-mix(in srgb,var(--fz-secondary) 9%,var(--fz-surface)); border-color:var(--fz-border); }
th,td { border-color:var(--fz-border); }
th { color:var(--fz-muted); }
.filtro-tab { background:color-mix(in srgb,var(--fz-secondary) 13%,var(--fz-surface)); border-color:var(--fz-border); color:var(--fz-muted); }
.filtro-tab.ativo { background:var(--fz-accent); color:var(--fz-on-accent); }
.finance-hero { background:linear-gradient(125deg,var(--fz-primary),var(--fz-accent)); box-shadow:0 22px 50px color-mix(in srgb,var(--fz-primary) 30%,transparent); }
.metric-card.metric-alerta { background:color-mix(in srgb,#ef4444 8%,var(--fz-surface)); }
.line-chart-grid { stroke:var(--fz-border); }
.line-chart-axis,.line-chart-label { fill:var(--fz-muted); }
.line-chart-area { fill:color-mix(in srgb,var(--fz-accent) 16%,transparent); }
.line-chart-line { stroke:var(--fz-accent); }
.line-chart-point circle { fill:var(--fz-surface); stroke:var(--fz-accent); }
.insight-item { border-left-color:var(--fz-accent); }
.ranking-bar { background:color-mix(in srgb,var(--fz-secondary) 18%,var(--fz-surface)); }
.ranking-bar i { background:linear-gradient(90deg,var(--fz-primary),var(--fz-accent)); }
.ranking-posicao,.gateway-chip { background:color-mix(in srgb,var(--fz-highlight) 22%,var(--fz-surface)); color:var(--fz-primary); }
.landing-header { background:color-mix(in srgb,var(--fz-surface) 90%,transparent); border-color:var(--fz-border); }
.hero { background:linear-gradient(135deg,color-mix(in srgb,var(--fz-highlight) 30%,var(--fz-bg)),color-mix(in srgb,var(--fz-secondary) 22%,var(--fz-bg)),var(--fz-bg)); border-color:var(--fz-border); }
.hero h1,.hero p,.logo { color:var(--fz-text); }
.pill { background:var(--fz-accent); border-color:color-mix(in srgb,var(--fz-accent) 78%,var(--fz-primary)); color:var(--fz-on-accent); }
.auth-page { background:var(--fz-bg); }
code { color:var(--fz-primary); background:color-mix(in srgb,var(--fz-secondary) 14%,var(--fz-surface)); border-radius:5px; padding:1px 4px; }

.config-gerais-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); gap:22px; align-items:start; }
.temas-grid { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:14px; }
.tema-opcao { position:relative; display:block; cursor:pointer; }
.tema-opcao input { position:absolute; opacity:0; pointer-events:none; }
.tema-card { display:block; height:100%; padding:17px; border:2px solid var(--fz-border); border-radius:16px; background:var(--fz-surface); transition:border-color .16s,transform .16s,box-shadow .16s; }
.tema-opcao:hover .tema-card { transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb,var(--fz-primary) 10%,transparent); }
.tema-opcao input:checked + .tema-card { border-color:var(--fz-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-accent) 18%,transparent); }
.tema-card-cabecalho { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.tema-card h3 { margin:0; font-size:15px; }
.tema-card p { margin:5px 0 14px; color:var(--fz-muted); font-size:12px; }
.tema-selecionado { display:none; font-size:11px; font-weight:800; color:var(--fz-accent); }
.tema-opcao input:checked + .tema-card .tema-selecionado { display:inline; }
.tema-paleta { display:grid; grid-template-columns:repeat(4,1fr); height:34px; overflow:hidden; border-radius:9px; border:1px solid color-mix(in srgb,#fff 22%,transparent); }
.tema-paleta i { display:block; }
.fuso-preview { padding:15px; margin-top:12px; border-radius:13px; background:color-mix(in srgb,var(--fz-highlight) 14%,var(--fz-surface)); border:1px solid var(--fz-border); }
.fuso-preview strong,.fuso-preview span { display:block; }
.fuso-preview strong { font:700 20px var(--fz-font-heading); margin-top:4px; }
.fuso-preview span { color:var(--fz-muted); font-size:12px; }
@media (max-width:1000px) { .config-gerais-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .temas-grid { grid-template-columns:1fr; } }
.btn-link.excluir { appearance:none; background:transparent; border:0; padding:0; font:inherit; cursor:pointer; }

/* Catálogo global de modelos de mensagens */
.modelos-resumo { display:flex; align-items:baseline; gap:8px; padding:10px 15px; border:1px solid var(--fz-border); border-radius:14px; background:var(--fz-surface); }
.modelos-resumo strong { font:800 24px var(--fz-font-heading); color:var(--fz-accent); }
.modelos-resumo span { color:var(--fz-muted); font-size:12px; }
.modelos-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); gap:20px; align-items:center; overflow:hidden; }
.modelos-intro > * { min-width:0; overflow-wrap:anywhere; }
.modelos-intro h2 { margin-bottom:7px; }
.modelos-intro p { color:var(--fz-muted); line-height:1.6; margin:0; }
.modelos-intro .alerta { margin:0; }
.modelos-filtros { display:grid; grid-template-columns:minmax(180px,.55fr) minmax(220px,.75fr) minmax(280px,1.5fr); gap:16px; align-items:end; overflow:hidden; }
.modelos-filtros .campo { margin:0; min-width:0; }
.campo-busca-modelo { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; }
.campo-busca-modelo label { grid-column:1/-1; }
.modelos-lista { display:grid; gap:18px; }
.modelo-card { scroll-margin-top:24px; }
.modelo-card-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.modelo-card-topo h2 { margin:9px 0 5px; }
.modelo-card-topo p { color:var(--fz-muted); margin:0 0 8px; font-size:13px; }
.modelo-metadados { display:flex; flex-wrap:wrap; gap:7px; }
.modelo-editor { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:18px; }
.modelo-editor > * { min-width:0; }
.modelo-editor label,.modelo-preview-wrap > span { display:block; font-size:12px; font-weight:700; color:var(--fz-text); margin-bottom:7px; }
.modelo-editor textarea { width:100%; resize:vertical; min-height:104px; padding:13px 14px; border:1px solid var(--fz-border); border-radius:12px; background:var(--fz-surface); color:var(--fz-text); font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.modelo-editor textarea:focus { outline:0; border-color:var(--fz-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-accent) 17%,transparent); }
.modelo-tags { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }
.modelo-tags > span { color:var(--fz-muted); font-size:11px; }
.modelo-tag { appearance:none; border:1px solid var(--fz-border); border-radius:7px; padding:4px 7px; background:color-mix(in srgb,var(--fz-highlight) 12%,var(--fz-surface)); color:var(--fz-primary); font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace; cursor:pointer; }
.modelo-tag:hover { border-color:var(--fz-accent); }
.modelo-preview { min-height:104px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:13px 14px; border-radius:12px; border:1px solid var(--fz-border); background:color-mix(in srgb,var(--fz-secondary) 9%,var(--fz-surface)); color:var(--fz-text); font-size:13px; line-height:1.55; }
@media (max-width:900px) { .modelos-intro,.modelo-editor { grid-template-columns:1fr; } .modelos-filtros { grid-template-columns:1fr 1fr; } .campo-busca-modelo { grid-column:1/-1; } }
@media (max-width:600px) {
  .modelos-resumo { width:100%; }
  .modelos-filtros { grid-template-columns:minmax(0,1fr); }
  .campo-busca-modelo { grid-column:auto; grid-template-columns:minmax(0,1fr) auto; }
  .campo-busca-modelo input { min-width:0; }
  .modelo-card { padding:17px; overflow:hidden; }
}
.btn-link.excluir { appearance:none; background:transparent; border:0; padding:0; font:inherit; cursor:pointer; }