:root {
  --bg: #000;
  --card: #111113;
  --card-2: #18181b;
  --borda: #26262b;
  --txt: #f4f4f5;
  --muted: #9a9aa3;
  --laranja: #f7971c;
  --laranja-2: #ffb347;
  --verde: #34d399;
  --vermelho: #f87171;
  --raio: 18px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* o topo da área segura (barra do iPhone) é coberto pelo header fixo */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
b, .saldo-valor, .kpi b { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.mini { font-size: 12px; }
.erro { color: var(--vermelho); min-height: 1.2em; margin: 0; font-size: 14px; }

/* Botões */
.btn {
  border: 1px solid var(--borda); background: var(--card-2); border-radius: 12px;
  padding: 11px 16px; font-weight: 600; font-size: 14px; transition: background .15s, transform .1s;
}
.btn:hover { background: #222227; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--laranja); border-color: var(--laranja); color: #000; }
.btn-primary:hover { background: var(--laranja-2); }
.btn-icone {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--card); font-size: 17px; display: grid; place-items: center;
}
.btn-icone.on { border-color: var(--laranja); color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; }
.btn-link { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 2px 6px; border-radius: 8px; }
.btn-link:hover { color: var(--laranja); }
.btn-link.girando { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; }
.login-card {
  width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--borda);
  border-radius: 24px; padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-logo { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 4px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card p { margin: 0 0 8px; }
.login-card input {
  background: #000; border: 1px solid var(--borda); color: var(--txt); border-radius: 12px;
  padding: 13px 14px; font-size: 16px; outline: none;
}
.login-card input:focus { border-color: var(--laranja); }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  /* header preenche a área da barra de status: o conteúdo rolado nunca aparece por trás dela */
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: #000;
  border-bottom: 1px solid #141417;
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 40px; height: 40px; border-radius: 11px; }
.marca strong { display: block; font-size: 16px; }
.ao-vivo { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ao-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulso 2s infinite; }
.ao-vivo.off i { background: var(--vermelho); animation: none; }
@keyframes pulso { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.topo-acoes { display: flex; gap: 8px; }

/* Layout */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; min-width: 0; }
.card-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.rotulo { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.aviso { background: #1a1206; border: 1px solid #4a2f07; color: var(--laranja-2); padding: 12px 14px; border-radius: 14px; font-size: 14px; }

.grade-topo { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
.grade-meio { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }

/* Saldo */
.saldo {
  background: radial-gradient(120% 90% at 0% 0%, rgba(247,151,28,.28), transparent 60%), var(--card);
  border-color: #3a2a12; display: flex; flex-direction: column;
}
.saldo-valor { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 16px; }
.saldo-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.saldo-linhas div { background: rgba(0,0,0,.35); border: 1px solid #222; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.saldo-linhas b { font-size: 16px; }
.saldo .mini { margin-top: 10px; }

/* Abas de conta (Todas / cada conta) */
.abas-conta { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.abas-conta::-webkit-scrollbar { display: none; }
.abas-conta button {
  flex: 1 0 auto; border: 1px solid var(--borda); background: var(--card); color: var(--muted);
  padding: 11px 16px; border-radius: 14px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.abas-conta button.ativo { color: #000; background: var(--laranja); border-color: var(--laranja); }

/* Divisão por conta (aba Todas) */
.por-conta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.por-conta .card { cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s; }
.por-conta .card:hover { border-color: var(--laranja); }
.por-conta .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.por-conta .linha b { font-size: 20px; color: var(--laranja); font-variant-numeric: tabular-nums; }
.por-conta .barra-fundo { height: 6px; background: #232328; border-radius: 99px; overflow: hidden; }
.por-conta .barra-fundo i { display: block; height: 100%; background: var(--laranja); border-radius: 99px; }
.tag-conta { display: inline-block; font-size: 11px; font-weight: 700; color: var(--laranja); background: #231607; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }

/* Períodos */
.lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.periodos { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.periodos::-webkit-scrollbar { display: none; }
.periodos button { flex: 1; border: 0; background: none; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.periodos button.ativo { background: var(--laranja); color: #000; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; }
.kpi { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.kpi b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.kpi.destaque b { color: var(--laranja); }
.var { font-size: 12px; font-weight: 700; }
.var.sobe { color: var(--verde); }
.var.desce { color: var(--vermelho); }

/* Gráfico */
.grafico-card { position: relative; }
.grafico { height: 250px; }
.grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico .barra { fill: var(--laranja); transition: opacity .15s; }
.grafico .barra.vazia { fill: #232328; }
.grafico .alvo { fill: transparent; cursor: pointer; }
.grafico .alvo:hover + .barra, .grafico g.hover .barra { fill: var(--laranja-2); }
.grafico text { fill: var(--muted); font-size: 11px; }
.grafico .grade { stroke: #1d1d22; stroke-width: 1; }
.tooltip {
  position: absolute; pointer-events: none; background: #000; border: 1px solid var(--borda);
  padding: 8px 10px; border-radius: 10px; font-size: 13px; white-space: nowrap; transform: translate(-50%, -110%);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.tooltip b { color: var(--laranja); }

/* Vendas */
.vendas-card { display: flex; flex-direction: column; }
.vendas { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 250px; flex: 1; }
.vendas li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1c1c20; }
.vendas li:last-child { border-bottom: 0; }
.vendas .avatar { width: 34px; height: 34px; border-radius: 10px; background: #231607; color: var(--laranja); display: grid; place-items: center; font-weight: 800; flex: none; }
.vendas .quem { flex: 1; min-width: 0; }
.vendas .quem b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendas .valor { text-align: right; }
.vendas .valor b { display: block; color: var(--verde); }
.vendas li.nova { animation: brilho 2.4s ease-out; }
@keyframes brilho { 0% { background: rgba(247,151,28,.25); } 100% { background: transparent; } }
.vazio { text-align: center; padding: 30px 8px; color: var(--muted); font-size: 14px; }

/* Notificações */
.notif { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.notif-info p { margin: 6px 0 0; }
.notif-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.rodape { text-align: center; margin: 0 0 16px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--laranja); color: #000; font-weight: 700; padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(247,151,28,.35); z-index: 50; max-width: calc(100vw - 32px); text-align: center;
  animation: sobe .25s ease-out;
}
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Tablet */
@media (max-width: 1020px) {
  .grade-topo, .grade-meio { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .vendas { max-height: 420px; }
}
/* Celular */
@media (max-width: 560px) {
  .conteudo { padding: 12px 16px; gap: 12px; }
  .card { padding: 16px; border-radius: 16px; }
  .saldo-valor { font-size: 34px; }
  .kpis { gap: 10px; }
  .kpi b { font-size: 20px; }
  .grafico { height: 200px; }
  .marca strong { font-size: 15px; }
  .notif-botoes { width: 100%; }
  .notif-botoes .btn { flex: 1 1 auto; }
  .notif-botoes .btn-primary { flex-basis: 100%; }
}

/* Período personalizado */
.periodos button { flex: 1 0 auto; }
.custom { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; padding: 12px; }
.custom label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; flex: 1 1 130px; }
.custom input {
  background: #000; border: 1px solid var(--borda); color: var(--txt); border-radius: 10px;
  padding: 9px 10px; font: inherit; font-size: 15px; color-scheme: dark; min-width: 0;
}
.custom input:focus { outline: none; border-color: var(--laranja); }
.custom .btn { flex: 1 1 100px; }