/* Finance Dashboard — dark mode, mobile first */
:root{
  --bg:#0B0B0D; --card:#17171A; --card2:#1F1F23; --line:#2A2A30;
  --text:#FFFFFF; --text2:#A1A1AA;
  --green:#30D158; --red:#FF453A; --orange:#FF9F0A; --blue:#0A84FF;
  --r:18px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:16px} h3{font-size:14px}
p{margin:.4em 0}
code{background:var(--card2);padding:.1em .4em;border-radius:6px;font-size:.9em}
[hidden]{display:none!important}
.muted{color:var(--text2)} .small{font-size:13px} .center{text-align:center}
.pos{color:var(--green)} .neg{color:var(--red)}
.ic{width:20px;height:20px;flex:none} .ic-lg{width:34px;height:34px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit;font-weight:560;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:#27272c;text-decoration:none} .btn:active{transform:scale(.98)}
.btn.primary{background:var(--blue);border-color:var(--blue)} .btn.primary:hover{background:#2b94ff}
.btn.danger{color:var(--red)} .btn.block{display:flex;width:100%}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.icon{width:44px;padding:0} .btn.icon.sm{width:36px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.field>span{font-size:13px;color:var(--text2)}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit}
textarea{min-height:70px;resize:vertical}
input:disabled{opacity:.5}
input[type=file]{padding:9px 12px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=date]{color-scheme:dark}

.flash{padding:12px 14px;border-radius:var(--r-sm);margin:0 0 14px;background:var(--card2);border-left:4px solid var(--blue)}
.flash.success{border-color:var(--green)} .flash.error{border-color:var(--red)} .flash.warn{border-color:var(--orange)}
.flash.inline{margin:10px 0 0}

/* Login / instalação */
.auth{display:grid;place-items:center;min-height:100dvh;padding:20px}
.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:24px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-card.wide{max-width:520px}
.auth-card h1{font-size:24px;margin:10px 0 4px} .auth-card h3{margin:18px 0 10px}
.auth-logo{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#0A84FF,#30D158);color:#fff}
.checks{list-style:none;padding:0;margin:12px 0;font-size:13px}.checks .ok{color:var(--green)}.checks .bad{color:var(--red)}

/* Estrutura */
.app{min-height:100dvh}
.main{min-width:0;padding-bottom:calc(86px + var(--safe-b))}
.sidebar{display:contents}
.sidebar .brand,.sidebar .nav,.sidebar .sidefoot{display:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 14px 10px;background:rgba(11,11,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tb-title{flex:1;min-width:0}
.tb-company{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-period{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hide-sm{display:none}
.presets{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 2px;scrollbar-width:none}
.presets::-webkit-scrollbar{display:none}
.presets button{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;transition:all .15s}
.presets button:hover{color:var(--text)}
.presets button.on{background:var(--text);color:#000;border-color:var(--text);font-weight:600}
.content{padding:14px;max-width:1400px;margin:0 auto}
.content.loading{opacity:.55;transition:opacity .2s}
.stack{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.only-mobile{display:inline-flex}

/* Cards e painéis */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card,.panel{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.25);min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-h.sub{margin-top:20px}
.kpi-label{font-size:12px;color:var(--text2);letter-spacing:.02em}
.kpi-value{font-size:clamp(19px,5.4vw,28px);font-weight:700;letter-spacing:-.02em;margin:6px 0 4px;white-space:nowrap}
.kpi[data-k=resultado] .kpi-value,.kpi[data-k=saldo_final] .kpi-value{color:var(--green)}
.kpi.pos .kpi-value{color:var(--green)}
.kpi.neg .kpi-value{color:var(--red)}
.kpi-delta{font-size:12px;line-height:1.3}
.cards .kpi{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tabs{display:flex;gap:4px;background:var(--card2);padding:3px;border-radius:999px;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;color:var(--text2);font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--text);color:#000;font-weight:600}
#anaTabs button.on[data-m=entradas]{background:var(--green)}
#anaTabs button.on[data-m=saidas]{background:var(--red)}
#anaTabs button.on[data-m=resultado]{background:var(--orange)}

/* Gráficos */
.chart{min-height:260px;width:100%}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.ax-text{fill:var(--text2);font-size:11px}
.ax-grid{stroke:#232328;stroke-width:1}
.ax-zero{stroke:#3a3a41;stroke-width:1}
.ax-guide{stroke:#52525b;stroke-dasharray:3 3}
.bar{transform-origin:bottom;animation:grow .5s ease both}
@keyframes grow{from{opacity:0}to{opacity:1}}
.chart-empty{display:grid;place-items:center;min-height:160px;color:var(--text2);font-size:14px;text-align:center;padding:12px}
.chart-tip{position:fixed;z-index:100;display:none;pointer-events:none;background:#0d0d10;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.6);min-width:120px}
.tip-h{color:var(--text2);margin-bottom:4px}
.tip-r{display:flex;align-items:center;gap:6px}
.tip-r i{width:8px;height:8px;border-radius:50%;display:inline-block}
.tip-r b{margin-left:auto;padding-left:14px}
.hbars{display:flex;flex-direction:column;gap:14px}
.hb-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:6px}
.hb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-v small{color:var(--text2);margin-left:4px}
.hb-track{height:10px;border-radius:999px;background:var(--card2);overflow:hidden}
.hb-fill{height:100%;border-radius:999px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.donut{display:flex;flex-direction:column;align-items:center;gap:16px}
.donut-svg svg{width:180px;height:180px}
.seg{cursor:pointer;transition:opacity .15s}.seg:hover{opacity:.8}
.donut-c1{fill:var(--text2);font-size:11px}.donut-c2{fill:#fff;font-size:15px;font-weight:650}
.legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}
.legend li{display:flex;align-items:center;gap:10px;font-size:14px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.lg-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-v small{color:var(--text2);margin-left:4px}

/* Alertas */
.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alerts li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--card2);font-size:14px}
.alerts .al-i{font-weight:700;width:18px;text-align:center;flex:none}
.alerts .bad{background:rgba(255,69,58,.12)}.alerts .bad .al-i{color:var(--red)}
.alerts .warn{background:rgba(255,159,10,.12)}.alerts .warn .al-i{color:var(--orange)}
.alerts .ok{background:rgba(48,209,88,.11)}.alerts .ok .al-i{color:var(--green)}
.alerts .info .al-i{color:var(--blue)}

/* Lançamentos */
.filters{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:10px}
.tx{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border-bottom:0}
.tx-main{min-width:0}.tx-desc{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-sub{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-amt{font-weight:650;white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}

/* DRE e tabelas */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;color:var(--text2);font-weight:560;text-align:left;padding:8px 10px;white-space:nowrap}
.tbl td{padding:10px;border-top:1px solid var(--line)}
.r{text-align:right}
.dre-t th.r,.dre-t td.r{text-align:right}
.dre-head td,.dre-sub td{font-weight:650}
.dre-sub td{background:rgba(255,255,255,.03)}
.dre-total td{font-weight:750;font-size:16px;background:var(--card2);border-top:2px solid var(--line)}
.dre-minus td:first-child,.dre-plus td:first-child{color:var(--text2);padding-left:18px}
tr.has-det{cursor:pointer}.chev{display:inline-block;transition:transform .15s;color:var(--text2)}tr.open .chev{transform:rotate(180deg)}
tr.det td{font-size:13.5px;color:var(--text2);padding-left:34px;background:rgba(255,255,255,.015)}
.var{font-size:12px;font-weight:500}
.scroll{overflow-x:auto;border-radius:var(--r-sm)}
.preview th,.preview td{white-space:nowrap;font-size:13px}
.preview td{max-width:240px;overflow:hidden;text-overflow:ellipsis}

/* Comparação */
.compare-form{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cmp-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr;gap:0;font-size:13.5px}
.cmp-grid>div{padding:10px 6px;border-top:1px solid var(--line);min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmp-h{color:var(--text2);font-size:12px;border-top:0!important}
.cmp-k{font-weight:560}
.sub-h{margin:18px 0 4px}
.acc-r{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.acc-r:first-child{border-top:0}

/* Importação */
.upload{display:flex;flex-direction:column;gap:12px}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:30px 16px;border:2px dashed var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s;position:relative;color:var(--text2)}
.drop:hover,.drop.over{border-color:var(--blue);background:rgba(10,132,255,.06)}
.drop strong{color:var(--text)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
.files{display:flex;flex-direction:column}
.file{display:grid;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.file:first-child{border-top:0}
.file-name{font-weight:600;word-break:break-word}
.file-actions{display:flex;flex-wrap:wrap;gap:8px}
.file-actions form{margin:0}
.badge{justify-self:start;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--card2)}
.badge.ok{background:rgba(48,209,88,.15);color:var(--green)}.badge.bad{background:rgba(255,69,58,.15);color:var(--red)}.badge.warn{background:rgba(255,159,10,.15);color:var(--orange)}
.fileinfo{display:flex;flex-direction:column;gap:2px}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:14px}
.inline-form .field{margin:0;min-width:140px}.inline-form .btn{margin-bottom:0}
.mapgrid{display:grid;gap:0 14px;grid-template-columns:1fr}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.form-grid{display:grid;gap:0 14px;grid-template-columns:1fr}
.form-grid .actions{grid-column:1/-1}
.sep{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.kv{list-style:none;margin:0 0 12px;padding:0}
.kv li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kv li:first-child{border-top:0}
.onboarding{text-align:left;padding:22px}
.onboarding h2{font-size:22px;margin-bottom:14px}
.steps{list-style:none;counter-reset:s;margin:0 0 18px;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start}
.steps li::before{content:counter(s);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card2);font-weight:700}
.steps span{color:var(--text2);font-size:14px}

/* Seletor de período (folha no mobile) */
.period-panel{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:84dvh;overflow:auto;background:var(--card);border-radius:24px 24px 0 0;padding:16px 16px calc(18px + var(--safe-b));transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.period-panel.open{transform:none}
.pp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pp-year{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pp-year-btn{background:none;border:0;color:var(--text);font:inherit;font-weight:700;font-size:17px;cursor:pointer;padding:6px 10px}
.pp-months{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pp-months button{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:var(--r-sm);border:1px solid transparent;background:var(--card2);color:var(--text);font:inherit;cursor:pointer}
.pp-months button i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.pp-months button:not(.has){color:var(--text2)}
.pp-months button.active{background:var(--blue);color:#fff}.pp-months button.active i{background:#fff}
.pp-custom{display:grid;gap:8px;margin-top:14px}
.backdrop{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-radius:24px 24px 0 0;padding:12px 12px calc(14px + var(--safe-b));transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet a,.sheet button{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 14px;border-radius:var(--r-sm);color:var(--text);background:none;border:0;font:inherit;width:100%;cursor:pointer;text-align:left;text-decoration:none}
.sheet a:hover,.sheet button:hover{background:var(--card2)}
.sheet form{margin:0}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(23,23,26,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--safe-b))}
.bottomnav a,.bottomnav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--text2);font:inherit;font-size:11px;background:none;border:0;cursor:pointer;text-decoration:none}
.bottomnav .active{color:var(--text)}
.bottomnav .active .ic{color:var(--blue)}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);z-index:120;background:#2a1412;border:1px solid var(--red);padding:12px 16px;border-radius:var(--r-sm);max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* Telas médias */
@media (min-width:640px){
  .hide-sm{display:inline}
  .filters{grid-template-columns:2fr 1fr 1fr}
  .mapgrid,.form-grid{grid-template-columns:1fr 1fr}
  .file{grid-template-columns:1fr auto;align-items:center}
  .file-actions{grid-column:1/-1}
  .donut{flex-direction:row;align-items:center}
  .legend{flex:1}
  .content{padding:20px}
}
/* Desktop */
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:268px minmax(0,1fr)}
  .main{padding-bottom:40px}
  .sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto;background:var(--card);border-right:1px solid var(--line);padding:18px 14px}
  .sidebar .brand,.sidebar .nav,.sidebar .sidefoot{display:flex}
  .brand{align-items:center;gap:12px;color:var(--text);font-weight:700;font-size:17px;padding:4px 8px 16px;text-decoration:none}
  .brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#0A84FF,#30D158);color:#fff}
  .brand-logo{width:36px;height:36px;border-radius:11px;object-fit:cover}
  .nav{flex-direction:column;gap:2px}
  .nav-link{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--text2);text-decoration:none}
  .nav-link:hover{background:var(--card2);color:var(--text)}
  .nav-link.active{background:var(--card2);color:var(--text)}
  .nav-link.active .ic{color:var(--blue)}
  .period-panel{position:static;transform:none;max-height:none;overflow:visible;background:none;box-shadow:none;border-radius:0;padding:16px 4px 0;margin-top:14px;border-top:1px solid var(--line);z-index:auto}
  .pp-head .only-mobile{display:none}
  .pp-months{grid-template-columns:1fr;gap:2px}
  .pp-months button{min-height:32px;background:none;font-size:14px}
  .pp-months button:hover:not(.active){background:var(--card2)}
  .sidefoot{margin-top:auto;padding-top:14px;align-items:center;justify-content:space-between;gap:8px}
  .who{display:flex;align-items:center;gap:10px;min-width:0}
  .avatar{width:32px;height:32px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-weight:700;flex:none}
  .who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .sidefoot form{margin:0}
  .only-mobile,.bottomnav,.sheet,.backdrop{display:none!important}
  .topbar{padding:14px 28px}
  .presets{padding:16px 28px 0}
  .content{padding:20px 28px 28px}
  .grid2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid2>.panel:only-child{grid-column:1/-1}
  .filters{grid-template-columns:2fr 1fr 1fr}
  .cmp-grid{font-size:14.5px}
  .mapgrid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}