/* Tema escuro no estilo Consuflux Controle */
:root{
  --bg:#09070a;--panel:#0e0b0d;--card:rgba(255,255,255,.028);--card2:rgba(255,255,255,.05);
  --ink:#f4f4f6;--mute:#9a9aa6;--dim:#6b6b76;--line:#2a2024;--line2:#3a2a2e;
  --red:#ff5a5f;--red-d:#ff3b1f;--orange:#ff7a1a;--brand:#ff3b1f;--green:#10e29b;--yellow:#ffb020;--blue:#4da3ff;
  --green-bg:rgba(16,226,155,.12);--red-bg:rgba(255,90,95,.13);--yellow-bg:rgba(255,176,32,.12);--blue-bg:rgba(77,163,255,.12);
  --grad:linear-gradient(90deg,#ff3b1f,#ff7a1a);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--head:'Space Grotesk','Inter',system-ui,sans-serif;
  --side:250px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{margin:0;color:var(--ink);font:15px/1.45 var(--font);background:
  radial-gradient(900px 420px at 72% -80px,rgba(150,18,18,.38),transparent 70%),
  radial-gradient(600px 400px at 0% 100%,rgba(90,10,20,.18),transparent 70%),var(--bg);background-attachment:fixed;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#3a1c20;border-radius:9px}::-webkit-scrollbar-track{background:transparent}

/* layout */
.layout{display:flex;min-height:100dvh}
.side{display:none}
.content{flex:1;min-width:0;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
header.top{padding:calc(16px + env(safe-area-inset-top)) 16px 4px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
header.top h1{font:700 1.7rem/1.1 var(--head);margin:0;letter-spacing:-.01em}
.sub{font:600 .68rem var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.tools{display:flex;gap:10px;align-items:center}
.monthnav{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:3px}
.monthnav b{font:600 .88rem var(--head);min-width:128px;text-align:center;text-transform:capitalize}
.iconbtn{background:transparent;border:0;color:var(--mute);width:36px;height:36px;border-radius:11px;display:grid;place-items:center;transition:.15s}
.iconbtn:hover{background:var(--card2);color:var(--ink)}
.newbtn{display:none;align-items:center;gap:8px;border:0;border-radius:13px;padding:10px 16px;font-weight:700;color:#fff;background:var(--grad);box-shadow:0 6px 22px rgba(255,59,31,.28);transition:.2s}
.newbtn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(255,59,31,.4)}
main{padding:14px 16px;display:grid;gap:16px;max-width:1280px}

/* cartões */
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:18px;padding:18px;backdrop-filter:blur(6px)}
.card h2,.ptitle{font:600 .95rem var(--head);margin:0 0 14px;color:var(--ink);display:flex;gap:8px;align-items:center}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;text-align:left;width:100%;transition:.2s;overflow:hidden}
.kpi small{display:block;font:600 .64rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;padding-right:26px}
.kpi b{font:700 1.7rem/1.1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .ico{position:absolute;right:14px;top:14px;color:var(--mute)}
.kpi.sm b{font-size:1.2rem}
button.kpi:hover,.act:hover,.item:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.kpi.glow-g{box-shadow:inset 0 0 40px rgba(16,226,155,.04)}
.kpi.glow-r{box-shadow:inset 0 0 40px rgba(255,90,95,.07)}
.pos{color:var(--green)}.neg{color:var(--red)}.warn{color:var(--yellow)}
.panel{border:1px solid #4a1519;background:linear-gradient(180deg,rgba(255,40,30,.05),rgba(255,40,30,.015));border-radius:20px;padding:18px;box-shadow:0 0 60px rgba(255,40,30,.04)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;background:rgba(255,255,255,.02);transition:.2s;position:relative}
.act.y{background:var(--yellow-bg);border-color:rgba(255,176,32,.28)}.act.r{background:var(--red-bg);border-color:rgba(255,90,95,.3)}
.act.g{background:var(--green-bg);border-color:rgba(16,226,155,.28)}.act.o{background:rgba(255,255,255,.03)}
.act b.t{display:block;font:600 .8rem var(--head);margin-bottom:8px}
.act.y b.t{color:var(--yellow)}.act.r b.t{color:var(--red)}.act.g b.t{color:var(--green)}
.act strong{display:block;font:700 1.6rem/1 var(--head)}
.act small{display:block;color:var(--mute);font-size:.74rem;margin-top:6px}
.act .go{position:absolute;right:12px;top:12px;opacity:.7}
.split{display:grid;gap:16px}
.row2{display:grid;gap:16px}

/* barras */
.sbar{margin-bottom:14px}
.sbar .l{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:6px;gap:10px}
.sbar .l span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.track{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.track>i{display:block;height:100%;border-radius:99px;background:var(--grad);box-shadow:0 0 12px rgba(255,90,40,.55);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.track.g>i{background:linear-gradient(90deg,#0ba573,#10e29b);box-shadow:0 0 12px rgba(16,226,155,.5)}
.legend{display:grid;gap:8px;margin-top:14px;font-size:.86rem}
.legend div{display:flex;justify-content:space-between;gap:8px}
.legend.inl{display:flex;gap:16px;justify-content:flex-start}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
svg text{fill:var(--mute);font-size:10px;font-family:var(--font)}
.chartwrap{display:grid;gap:16px;align-items:center}

/* listas */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 16px;white-space:nowrap;font-size:.86rem;color:var(--mute);transition:.15s}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(255,59,31,.3)}
.list{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:16px;padding:12px 14px;width:100%;text-align:left;transition:.2s;cursor:pointer}
.check{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid #3a3a44;background:transparent;display:grid;place-items:center;font-size:.95rem;color:transparent;transition:.2s}
.check:hover{border-color:var(--green)}
.check.on{background:var(--green);border-color:var(--green);color:#04130d;box-shadow:0 0 14px rgba(16,226,155,.45)}
.item .mid{flex:1;min-width:0}
.item .mid b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .mid small{color:var(--mute);font-size:.76rem}
.item .amt{font:700 .98rem var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{font:700 .62rem var(--font);letter-spacing:.06em;border-radius:99px;padding:2px 8px;margin-left:8px;text-transform:uppercase}
.b-pago{background:var(--green-bg);color:var(--green)}.b-pendente{background:var(--blue-bg);color:var(--blue)}.b-atrasado{background:var(--red-bg);color:var(--red)}
.empty{text-align:center;color:var(--mute);padding:26px 8px}
.alert{background:var(--red-bg);border:1px solid rgba(255,90,95,.35);color:var(--red);border-radius:14px;padding:12px 14px;font-weight:600;text-align:left;width:100%;display:flex;gap:10px;align-items:center}

/* navegação inferior (mobile) */
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:rgba(14,11,13,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
nav.bottom .in{display:flex;align-items:center;max-width:640px;margin:0 auto}
nav.bottom button{flex:1;border:0;background:none;padding:9px 0 7px;color:var(--dim);font-size:.66rem;display:grid;gap:3px;justify-items:center;font-weight:600;letter-spacing:.03em}
nav.bottom button.on{color:var(--red)}
nav.bottom .fab{flex:none;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;margin:-24px 10px 0;box-shadow:0 6px 22px rgba(255,59,31,.45);display:grid;place-items:center;padding:0}
nav.bottom .fab svg{width:26px;height:26px}

/* sheets e formulários */
.sheetbg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:20;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
.sheet{background:#120d10;border:1px solid var(--line2);width:100%;max-width:560px;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));display:grid;gap:12px;animation:up .22s cubic-bezier(.2,.8,.2,1)}
.sheet h3{margin:0;font:700 1.15rem var(--head)}
@keyframes up{from{transform:translateY(30px);opacity:0}}@keyframes fade{from{opacity:0}}
label.f{display:grid;gap:5px;font:600 .66rem var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
input,select,textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;padding:12px;font-size:16px;color:var(--ink);transition:.15s;letter-spacing:0;text-transform:none}
input:focus,select:focus,textarea:focus{outline:0;border-color:#ff5a3f;box-shadow:0 0 0 3px rgba(255,90,63,.18)}
select option{background:#1a1215}
input[type=checkbox]{width:auto;accent-color:var(--red-d)}
input[type=color]{padding:2px;height:46px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.05);border-radius:13px;padding:3px}
.seg button{border:0;background:none;border-radius:10px;padding:10px;font-weight:600;color:var(--mute);transition:.15s}
.seg button.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(255,59,31,.3)}
.btn{border:0;border-radius:13px;padding:14px;font-weight:700;background:var(--grad);color:#fff;width:100%;box-shadow:0 6px 22px rgba(255,59,31,.25);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.sec{background:rgba(255,255,255,.05);border:1px solid var(--line2);box-shadow:none;color:var(--ink)}
.btn.danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,90,95,.3);box-shadow:none}
.btn:disabled{opacity:.5}
.chk{display:flex;gap:9px;align-items:center;font-size:.92rem}
.auth{min-height:100dvh;display:grid;place-items:center;padding:20px}
.auth .box{width:100%;max-width:400px;display:grid;gap:14px;padding:26px}
.auth .logo{display:grid;place-items:center}
.logo-mark{width:58px;height:58px;border-radius:17px;background:var(--grad);display:grid;place-items:center;box-shadow:0 8px 30px rgba(255,59,31,.4);color:#fff}
.logo-mark svg{width:30px;height:30px}
.auth h1{margin:0;text-align:center;font:700 1.45rem var(--head)}
.err{color:var(--red);font-size:.88rem;min-height:1.2em}
.menu{display:grid;gap:10px}
.menu .btn{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.catrow{display:flex;align-items:center;gap:10px}
.small{font-size:.8rem;color:var(--mute)}
#toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#1d1417;border:1px solid var(--line2);color:#fff;padding:11px 18px;border-radius:13px;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast.show{opacity:1}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,95,.5)}50%{box-shadow:0 0 0 7px rgba(255,90,95,0)}}
.pulse{animation:pulse 2s infinite}

/* ===== desktop ===== */
@media (min-width:900px){
  .side{display:flex;flex-direction:column;width:var(--side);flex:none;position:sticky;top:0;height:100dvh;background:rgba(10,8,10,.92);border-right:1px solid var(--line);padding:18px 14px;gap:6px;overflow:auto}
  .brand{display:flex;gap:12px;align-items:center;padding:4px 6px 14px}
  .brand .logo-mark{width:42px;height:42px;border-radius:13px}.brand .logo-mark svg{width:22px;height:22px}
  .brand b{display:block;font:700 1rem var(--head)}.brand small{font:600 .62rem var(--font);letter-spacing:.2em;color:var(--mute)}
  .slabel{font:600 .62rem var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:14px 8px 6px}
  .nv{display:flex;align-items:center;gap:12px;border:1px solid transparent;background:none;color:var(--mute);padding:11px 12px;border-radius:13px;text-align:left;width:100%;font-weight:500;transition:.15s;position:relative}
  .nv:hover{background:rgba(255,255,255,.04);color:var(--ink)}
  .nv.on{background:linear-gradient(90deg,rgba(255,59,31,.16),rgba(255,59,31,.04));border-color:#6d1a1c;color:#fff}
  .nv.on::before{content:'';position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--red-d);box-shadow:0 0 10px var(--red-d)}
  .nv.on::after{content:'';position:absolute;right:14px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  .sp{flex:1}
  .usercard{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}
  .usercard b{display:block}.usercard small{color:var(--mute);font-size:.74rem;word-break:break-all}
  .content{padding-bottom:30px}
  nav.bottom{display:none}
  header.top{padding:28px 28px 6px}
  header.top h1{font-size:2rem}
  .newbtn{display:inline-flex}
  main{padding:18px 28px 28px}
  .grid4{grid-template-columns:repeat(4,1fr);gap:16px}
  .acts{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr 1fr}
  .chartwrap{grid-template-columns:200px 1fr}
  .sheetbg{align-items:center}
  .sheet{border-radius:22px}
  #toast{bottom:30px}
}