:root{
  --bg:#0b1020; --card:#111a33; --muted:#93a4c7; --text:#eaf0ff;
  --line:rgba(255,255,255,.08);
  --primary:#2f7dff; --danger:#ff4d4d;
}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
body{margin:0;background:linear-gradient(180deg,#070b16,#0b1020);color:var(--text);}
.topbar{position:sticky;top:0;z-index:10;background:rgba(7,11,22,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.brand{display:flex;gap:12px;align-items:center;min-width:240px;}
.logoBox{
  width:72px;height:72px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.logoBox img{width:100%;height:100%;object-fit:contain;padding:6px;}
.title{font-weight:800;letter-spacing:.2px}
.subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.tabs{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:transparent;color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer}
.tab.active{background:rgba(47,125,255,.18);border-color:rgba(47,125,255,.35)}
.container{max-width:1100px;margin:18px auto;padding:0 16px}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{background:rgba(17,26,51,.75);border:1px solid var(--line);border-radius:18px;padding:16px}
h2{margin:0 0 12px 0;font-size:18px}
.form label{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
input,select,textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--text);outline:none}
.row{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:700px){.row{grid-template-columns:1fr 1fr}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{border:1px solid var(--line);background:transparent;color:var(--text);
  padding:10px 12px;border-radius:14px;cursor:pointer}
.btn.primary{background:rgba(47,125,255,.22);border-color:rgba(47,125,255,.4)}
.btn.danger{background:rgba(255,77,77,.16);border-color:rgba(255,77,77,.35)}
.tableWrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}
.table{width:100%;border-collapse:collapse;min-width:620px;background:rgba(0,0,0,.12)}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.table th{color:var(--muted);text-align:left}
.hint{color:var(--muted);font-size:12px;margin-top:10px}
.hidden{display:none}
.status{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18)}

/* Recibo */
.reciboArea{margin-top:12px}
.recibo{background:#fff;color:#111;border-radius:14px;padding:16px;border:1px solid #ddd}
.reciboHeader{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.reciboBrand{display:flex;gap:12px;align-items:flex-start}
.reciboLogo{
  width:62px;height:62px;border-radius:14px;border:1px solid #ddd;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.reciboLogo img{width:100%;height:100%;object-fit:contain;padding:6px;}
.reciboHeadText{min-width:240px}
.reciboTitle{font-weight:900;font-size:20px;letter-spacing:.5px}
.reciboSub{font-size:12px;color:#444;margin-top:2px}
.reciboNum{text-align:right;font-size:12px;color:#444}
.numBox{display:inline-block;margin-top:6px;border:1px solid #bbb;border-radius:10px;padding:6px 10px;font-weight:800;color:#111}
.reciboBody p{margin:10px 0}
.muted{color:#555;font-size:12px}
.signs{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:18px}
.sign .line{height:1px;background:#111;margin-bottom:6px}
.footer{margin-top:14px;text-align:right;color:#555}
@media print{
  body{background:#fff}
  .topbar,.actions,.hint,.status{display:none !important}
  .card{border:none;background:#fff}
  .recibo{border:1px solid #ddd}
}

/* User box */
.userBox{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.12);
}
.userName{font-weight:700;font-size:12px}
.userRole{font-size:12px;color:var(--muted)}
.btn.mini{padding:8px 10px;border-radius:12px;font-size:12px}

/* Login */
.loginWrap{
  min-height:calc(100vh - 110px);
  display:grid;
  place-items:center;
  padding:20px 0;
}
.loginCard{max-width:420px;width:100%}

/* KPIs (Relatórios) */
.kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.kpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.10);
}
.kpiLabel{font-size:12px;color:var(--muted)}
.kpiValue{font-size:18px;font-weight:800;margin-top:6px}
@media (max-width: 720px){
  .kpis{grid-template-columns:1fr}
}


/* V12 - filtros dos lançamentos */
.toolbarLancamentos{display:grid;gap:10px;grid-template-columns:1fr;align-items:center;margin-bottom:12px}
@media(min-width:860px){.toolbarLancamentos{grid-template-columns:auto minmax(220px,1fr) auto auto auto}}
.kpisLanc{margin-bottom:12px}
.kpisLanc .kpiValue{font-size:16px}


/* V12.1 - relatórios */
.rowRelatorios{align-items:end}
@media(min-width:980px){.rowRelatorios{grid-template-columns:1fr 1fr 1fr auto}}
.actionsRelatorios{justify-content:flex-start}
.cardGraficoFinanceiro{min-height:380px}
.graficoHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.graficoWrap{position:relative;min-height:300px;border:1px solid var(--line);border-radius:16px;padding:10px;background:rgba(0,0,0,.10);overflow:auto}
#graficoFinanceiro{display:block;width:100%;max-width:100%}


/* V12.2 - gráficos adicionais */
.cardComparativoMes{min-height:380px}
.comparativoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.comparativoBox{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(0,0,0,.10)}
.comparativoLabel{font-size:12px;color:var(--muted)}
.comparativoValor{font-size:24px;font-weight:800;margin-top:6px}
.comparativoMeta{font-size:12px;color:var(--muted);margin-top:6px}
.comparativoDelta{margin-top:12px;font-weight:700}
.comparativoDelta.up{color:#70e098}
.comparativoDelta.down{color:#ff8a8a}
.comparativoDelta.flat{color:var(--muted)}
.comparativoBarras{margin-top:12px;display:grid;gap:10px}
.barraLinha{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center}
.barraLinha span{font-size:12px;color:var(--muted)}
.barraTrack{height:16px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid var(--line)}
.barraFill{height:100%;width:0%;background:linear-gradient(90deg, rgba(47,125,255,.9), rgba(47,125,255,.55));border-radius:999px}
.barraFillAlt{background:linear-gradient(90deg, rgba(255,255,255,.65), rgba(147,164,199,.4))}
.cardGraficoTipos{min-height:380px}
.graficoModoLabel{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.graficoModoLabel select{margin-top:0;min-width:110px;padding:8px 10px;border-radius:12px}
@media (max-width: 720px){
  .comparativoGrid{grid-template-columns:1fr}
  .barraLinha{grid-template-columns:64px 1fr}
}


/* V12.3 - meta mensal, alerta e gráfico anual */
.cardMetaMensal,.cardGraficoAnual{min-height:380px}
.metaMensalGrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.metaMensalGrid{grid-template-columns:minmax(220px,320px) auto}}
.actionsMetaMensal{justify-content:flex-start}
.metaMensalCards{display:grid;gap:12px;grid-template-columns:1fr;margin-top:12px}
@media(min-width:860px){.metaMensalCards{grid-template-columns:1fr 1fr}}
.alertaReceita{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:700;background:rgba(255,255,255,.04)}
.alertaReceita.neutro{color:var(--text)}
.alertaReceita.ok{color:#70e098;border-color:rgba(112,224,152,.35);background:rgba(112,224,152,.08)}
.alertaReceita.warn{color:#ffd166;border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.08)}
.alertaReceita.crit{color:#ff8a8a;border-color:rgba(255,138,138,.35);background:rgba(255,138,138,.08)}
#graficoAnual{display:block;width:100%;max-width:100%}


/* V12.4 - meta anual e painel executivo */
.cardMetaAnual,.cardPainelExecutivo{min-height:380px}
.executivoCards{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.executivoCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.executivoCards{grid-template-columns:1fr}}
.executivoCard{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(0,0,0,.10)}
.executivoCardVazio{display:flex;align-items:center;justify-content:center;min-height:160px;color:var(--muted)}
.executivoTag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--text)}
.executivoValor{font-size:24px;font-weight:800;margin-top:14px}
.executivoMeta{font-size:12px;color:var(--muted);margin-top:6px}
.executivoBarra{margin-top:14px;height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid var(--line)}
.executivoBarraFill{height:100%;width:0%;border-radius:999px}
.executivoPct{margin-top:10px;font-size:12px;color:var(--muted)}

.acoes-premium {
  position: relative;
  display: inline-block;
}

.btn-acoes-premium {
  background: linear-gradient(135deg, #2f7dff, #1e4db7);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
}

.btn-acoes-premium:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.menu-acoes-premium {
  position: absolute;
  right: 0;
  top: 42px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  min-width: 180px;
  display: none;
  overflow: hidden;
  z-index: 999;
}

.acoes-premium.open .menu-acoes-premium {
  display: block;
  animation: fadeIn .15s ease;
}

.menu-acoes-premium button {
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  transition: .2s;
}

.menu-acoes-premium button:hover {
  background: #f1f5ff;
}

.menu-acoes-premium .danger {
  color: #c53030;
}

.menu-acoes-premium .danger:hover {
  background: #ffe5e5;
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(5px);}
  to {opacity:1; transform:translateY(0);}
}