/* Finanças do Marcos — tema escuro (grafite + dourado) */
:root{
  color-scheme:dark;
  --bg:#1B1C20; --bg-2:#17181B; --surface:#232429; --surface-2:#2A2B31; --surface-3:#33343B;
  --line:#32343A; --line-2:#3F4149; --ink:#F1F2F4; --muted:#A3A6AE; --dim:#6E717A;
  --accent:#D4A72C; --accent-2:#E8C25A; --accent-ink:#1B1606; --accent-soft:rgba(212,167,44,.14);
  --gold:linear-gradient(135deg,#E8C25A 0%,#D4A72C 55%,#B98E1C 100%);
  --in:#2EBD6B; --out:#F0506E;
  --c-essencial:#7CC0F8; --c-naoess:#F0506E; --c-invest:#FBE08A; --c-outros:#8A8D96;
  --p1:#7CC0F8; --p2:#2EBD6B; --p3:#FBE08A; --p4:#B39DFA; --p5:#F0506E; --p6:#8A8D96;
  --good:#2EBD6B; --warn:#E8B43C; --crit:#F0506E;
  --good-soft:rgba(46,189,107,.13); --warn-soft:rgba(232,180,60,.14); --crit-soft:rgba(240,80,110,.14);
  --shadow:none;
  --lift:0 14px 34px -18px rgba(0,0,0,.85);
  --glow:0 8px 22px -12px rgba(212,167,44,.6);
  --backdrop:rgba(8,8,10,.72);
  --glass:rgba(23,24,27,.88);
  --r:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%;background:var(--bg)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14.5px;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.01em}
::selection{background:rgba(212,167,44,.35)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;border:2px solid var(--bg)}

/* ---------- estrutura ---------- */
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;gap:14px;padding-inline:16px;padding-block:10px}
.navrow{display:none;border-top:1px solid var(--line)}
.navrow-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;gap:8px;padding-inline:28px}
.brand{display:flex;align-items:center;gap:10px;margin-right:6px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--gold);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:17px;flex:none}
.brand b{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.brand b span{color:var(--accent)}
.brand-mark{transition:transform .4s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}
#navSide{display:flex;gap:4px;margin-right:auto;overflow-x:auto;scrollbar-width:none}
.top-right{display:flex;align-items:center;gap:8px;margin-left:auto}
main{width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px;padding-block:0 116px;min-width:0}
@media (min-width:900px){
  .navrow{display:block}
  main{padding-inline:28px;padding-block:0 56px}
  .topbar-in{padding-inline:28px}
  .tabbar{display:none!important}
}
@media (max-width:520px){.brand b{display:none}}

.nav-btn{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:500;font-size:14.5px;white-space:nowrap;transition:color .2s,background .2s}
.nav-btn svg{width:18px;height:18px;flex:none}
.nav-btn:hover{color:var(--ink);background:var(--surface-2)}
#navSide .nav-btn{padding:14px 12px;border-radius:0}
#navSide .nav-btn:hover{background:transparent}
#navSide .nav-btn::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform .3s var(--ease)}
#navSide .nav-btn[aria-current="page"]{color:var(--ink);font-weight:600}
#navSide .nav-btn[aria-current="page"]::after{transform:scaleX(1)}
#navSide .nav-btn[aria-current="page"] svg{color:var(--ink)}

.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line-2);border-radius:20px;padding:6px;box-shadow:0 16px 40px -12px rgba(0,0,0,.8)}
.tabbar .nav-btn{flex-direction:column;gap:3px;padding:7px 2px;font-size:10.5px;justify-content:center;align-items:center;border-radius:14px}
.tabbar .nav-btn[aria-current="page"]{color:var(--ink);background:var(--surface-3)}

/* faixa de cotações */
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--bg-2);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content;gap:0;animation:tick 55s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{display:flex;align-items:baseline;gap:7px;padding:8px 18px;font-size:12.5px;white-space:nowrap;border-right:1px solid var(--line)}
.tk b{font-weight:600;color:var(--muted);font-size:11.5px}
.tk span{font-weight:700;font-variant-numeric:tabular-nums}
.tk i{font-style:normal;font-weight:800;font-size:11.5px}
@keyframes tick{to{transform:translateX(-50%)}}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;justify-content:space-between;padding-block:22px 16px}
.top h1{font-size:26px;margin-right:auto}
.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:620px){.top{padding-block:16px 12px}.top h1{font-size:25px}.top-actions{width:100%}.top-actions .month{flex:1;justify-content:space-between}.top-actions .month span{min-width:0}}

.month{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:3px}
.month button{border:0;background:transparent;width:34px;height:32px;border-radius:6px;font-size:18px;color:var(--muted);transition:background .2s,color .2s}
.month button:hover{background:var(--surface-3);color:var(--ink)}
.month span{min-width:136px;text-align:center;font-weight:600;text-transform:capitalize}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:transparent;border-radius:8px;padding:9px 16px;font-weight:500;font-size:14px;transition:transform .15s var(--ease),border-color .2s,background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{border-color:#62656F;background:var(--surface-2)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn.primary:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn.gold{background:var(--gold);border-color:transparent;color:var(--accent-ink);font-weight:700}
.btn.small{padding:6px 12px;font-size:12.5px}
.btn.danger{color:var(--crit);border-color:rgba(255,76,118,.45);background:transparent}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn:disabled{opacity:.5;cursor:default}
#btnAdd{padding-inline:14px}
@media (max-width:420px){#btnAdd .lbl-long{display:none}}

.sync{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:transparent;border-radius:8px;padding:8px 12px;font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap;transition:border-color .2s}
.sync:hover{border-color:var(--line-2);color:var(--ink)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.sync.good i{background:var(--good);box-shadow:0 0 0 3px rgba(47,209,139,.18)}
.sync.warn i{background:var(--warn)} .sync.crit i{background:var(--crit)} .sync.crit{color:var(--crit)}
.sync.busy i{background:var(--accent)}
@media (max-width:520px){.sync span{max-width:92px;overflow:hidden;text-overflow:ellipsis}}

/* ---------- blocos ---------- */
.view{display:flex;flex-direction:column;gap:18px}
.banner{background:var(--warn-soft);border:1px solid rgba(245,185,74,.3);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px}
.banner .btn{margin-left:8px}

.kpi,.panel,.card{position:relative;isolation:isolate}
.kpi::before,.panel::before,.card::before,.cc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.045),transparent 45%)}
.kpi:hover::before,.panel:hover::before,.card:hover::before,.cc:hover::before{opacity:1}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:var(--line-2)}
.kpi .lbl{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);font-weight:600}
.kpi .lbl .ic{width:30px;height:30px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;flex:none}
.kpi .lbl .ic svg{width:16px;height:16px}
.kpi:has(.ic) .val,.kpi:has(.ic) .sub{padding-left:40px}
.kpi .val{font-family:var(--f-display);font-size:clamp(18px,4.2vw,22px);font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .sub{font-size:12.5px;color:var(--muted)}
.kpi.lead{position:relative}
.kpi.lead::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cline%20x1%3D%2210%22%20y1%3D%2277%22%20x2%3D%2210%22%20y2%3D%22102%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%226%22%20y%3D%2283%22%20width%3D%228%22%20height%3D%227%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2224%22%20y1%3D%2254%22%20x2%3D%2224%22%20y2%3D%2291%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2264%22%20width%3D%228%22%20height%3D%2219%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2238%22%20y1%3D%2235%22%20x2%3D%2238%22%20y2%3D%2269%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2234%22%20y%3D%2245%22%20width%3D%228%22%20height%3D%2219%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2252%22%20y1%3D%2238%22%20x2%3D%2252%22%20y2%3D%2250%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2248%22%20y%3D%2243%22%20width%3D%228%22%20height%3D%222%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2266%22%20y1%3D%2226%22%20x2%3D%2266%22%20y2%3D%2248%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2262%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%222%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2280%22%20y1%3D%2217%22%20x2%3D%2280%22%20y2%3D%2256%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2276%22%20y%3D%2229%22%20width%3D%228%22%20height%3D%2212%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%2294%22%20y1%3D%2220%22%20x2%3D%2294%22%20y2%3D%2249%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2290%22%20y%3D%2229%22%20width%3D%228%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22108%22%20y1%3D%226%22%20x2%3D%22108%22%20y2%3D%2241%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22104%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%2213%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22122%22%20y1%3D%2215%22%20x2%3D%22122%22%20y2%3D%2228%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22118%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%222%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22136%22%20y1%3D%2214%22%20x2%3D%22136%22%20y2%3D%2247%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22132%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%2216%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22150%22%20y1%3D%2227%22%20x2%3D%22150%22%20y2%3D%2254%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22146%22%20y%3D%2236%22%20width%3D%228%22%20height%3D%227%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22164%22%20y1%3D%2219%22%20x2%3D%22164%22%20y2%3D%2249%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%2219%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22178%22%20y1%3D%2215%22%20x2%3D%22178%22%20y2%3D%2241%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22174%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22192%22%20y1%3D%2224%22%20x2%3D%22192%22%20y2%3D%2246%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22188%22%20y%3D%2233%22%20width%3D%228%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22206%22%20y1%3D%2226%22%20x2%3D%22206%22%20y2%3D%2260%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22202%22%20y%3D%2238%22%20width%3D%228%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22220%22%20y1%3D%2242%22%20x2%3D%22220%22%20y2%3D%2272%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22216%22%20y%3D%2253%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22234%22%20y1%3D%2250%22%20x2%3D%22234%22%20y2%3D%2284%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22230%22%20y%3D%2257%22%20width%3D%228%22%20height%3D%2212%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22248%22%20y1%3D%2243%22%20x2%3D%22248%22%20y2%3D%2282%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22244%22%20y%3D%2252%22%20width%3D%228%22%20height%3D%2217%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22262%22%20y1%3D%2227%22%20x2%3D%22262%22%20y2%3D%2256%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22258%22%20y%3D%2237%22%20width%3D%228%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22276%22%20y1%3D%2224%22%20x2%3D%22276%22%20y2%3D%2257%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22272%22%20y%3D%2237%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22290%22%20y1%3D%2238%22%20x2%3D%22290%22%20y2%3D%2276%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22286%22%20y%3D%2246%22%20width%3D%228%22%20height%3D%2218%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22304%22%20y1%3D%2253%22%20x2%3D%22304%22%20y2%3D%2279%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22300%22%20y%3D%2264%22%20width%3D%228%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22318%22%20y1%3D%2254%22%20x2%3D%22318%22%20y2%3D%2296%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22314%22%20y%3D%2269%22%20width%3D%228%22%20height%3D%2217%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22332%22%20y1%3D%2281%22%20x2%3D%22332%22%20y2%3D%22107%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22328%22%20y%3D%2286%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22346%22%20y1%3D%2279%22%20x2%3D%22346%22%20y2%3D%22116%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22342%22%20y%3D%2295%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3Cline%20x1%3D%22360%22%20y1%3D%2285%22%20x2%3D%22360%22%20y2%3D%22114%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22356%22%20y%3D%2293%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22374%22%20y1%3D%2263%22%20x2%3D%22374%22%20y2%3D%2299%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22370%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%2221%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22388%22%20y1%3D%2251%22%20x2%3D%22388%22%20y2%3D%2286%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22384%22%20y%3D%2256%22%20width%3D%228%22%20height%3D%2217%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22402%22%20y1%3D%2233%22%20x2%3D%22402%22%20y2%3D%2265%22%20stroke%3D%22%232FD18B%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22398%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%2216%22%20rx%3D%221.5%22%20fill%3D%22%232FD18B%22/%3E%3Cline%20x1%3D%22416%22%20y1%3D%2235%22%20x2%3D%22416%22%20y2%3D%2267%22%20stroke%3D%22%23FF4C76%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%22412%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%2218%22%20rx%3D%221.5%22%20fill%3D%22%23FF4C76%22/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;opacity:.16;pointer-events:none;z-index:-1}
.kpi.lead:hover{border-color:rgba(212,167,44,.5)}
.kpi.lead .val{color:var(--ink)}
button.kpi{cursor:pointer}
.pos{color:var(--in)} .neg{color:var(--out)}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 22px;min-width:0;display:flex;flex-direction:column;gap:12px;transition:border-color .3s}
.panel:hover{border-color:var(--line-2)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-h h2{font-size:18px;font-weight:500}
.panel > .panel-h:first-child{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.panel-h .aside{color:var(--muted);font-size:12.5px;font-weight:500;background:transparent;border:1px solid var(--line-2);padding:5px 11px;border-radius:8px}
.panel-h .aside:empty{display:none}
.chart-box{position:relative;height:250px}
.chart-box.short{height:200px}
.chart-box.tall{height:280px}
.empty{color:var(--muted);font-size:14px;padding:18px 4px;text-align:center}
.no-charts .chart-box::after{content:"Os gráficos aparecem depois que o app for aberto uma vez com internet.";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:var(--muted);font-size:13.5px}

/* abas em pílula */
.chips{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:3px;align-self:flex-start}
.chip{border:0;background:transparent;border-radius:6px;padding:7px 14px;font-weight:500;font-size:13.5px;color:var(--muted);transition:background .25s var(--ease),color .2s}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--surface-3);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}

.list{display:flex;flex-direction:column;gap:2px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 10px;border:0;border-radius:12px;background:transparent;text-align:left;width:100%;position:relative;transition:background .2s}
button.row:hover{background:var(--surface-2)}
button.row::before,.lmain::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);transform:scaleY(0);transition:transform .25s var(--ease)}
button.row:hover::before,.lmain:hover::before{transform:scaleY(1)}
.dot{width:32px;height:32px;border-radius:50%;position:relative;opacity:.9;flex:none}
.dot::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface)}
.row .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m{font-size:12.5px;color:var(--muted)}
.row .v{font-weight:600;white-space:nowrap}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:6px;padding:3px 8px;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.neutral{background:var(--surface-3);color:var(--muted)}
.pill.gold{background:var(--accent);color:var(--accent-ink)}
.pill.good::before,.pill.warn::before,.pill.crit::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.crit::before{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

.bar{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--in);border-radius:999px;transform-origin:left;animation:grow .9s var(--ease) both}
.bar.done i{background:var(--good)}
@keyframes grow{from{transform:scaleX(0)}}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:var(--line-2)}
.card-h{display:flex;align-items:center;gap:10px;justify-content:space-between}
.card-h .name{display:flex;align-items:center;gap:12px;min-width:0}
.card-h .name b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{font-size:21px;width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.big{font-family:var(--f-display);font-size:24px;font-weight:600;letter-spacing:-.02em}
.meta-line{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.card-actions{display:flex;gap:8px;flex-wrap:wrap}
.split{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end}

/* cartão de crédito */
.cc{position:relative;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  background:linear-gradient(145deg,#2C2D33 0%,#232429 55%,#1D1E22 100%);border:1px solid var(--line-2);box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cc::after{content:"";position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(212,167,44,.16),transparent 65%);pointer-events:none}
.cc:hover{box-shadow:var(--lift)}
.cc > *{position:relative;z-index:1}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cc-name{display:flex;align-items:center;gap:12px;min-width:0}
.cc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.cc .lbl-s{font-size:12.5px;color:var(--muted);font-weight:500}
.cc .fat-list{display:flex;flex-direction:column;gap:6px;font-size:13.5px;border-top:1px dashed var(--line-2);padding-top:10px}
.cc .fat-list div{display:flex;justify-content:space-between;gap:10px}
.cc .fat-list span{color:var(--muted);text-transform:capitalize}

/* ---------- lançamentos ---------- */
.alerts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:left;border:1px solid rgba(255,76,118,.3);background:linear-gradient(90deg,rgba(255,76,118,.08),transparent 60%),var(--surface);border-radius:14px;padding:12px 14px;font-weight:700;transition:border-color .2s,transform .2s var(--ease)}
.alerts:hover{border-color:var(--crit);transform:translateY(-1px)}
.alerts .go{margin-left:auto;color:var(--accent);font-size:13px}
.toolbar{display:flex;flex-direction:column;gap:10px}
.toolbar .chips{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.toolbar .chips::-webkit-scrollbar{display:none}
.toolbar .chip{white-space:nowrap}
.toolbar-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.kpis.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.kpis.compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpis.compact .kpi{padding:12px 14px}
.kpis.compact .val{font-size:clamp(17px,4vw,21px)}
.group{display:flex;flex-direction:column;gap:4px}
.group-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 4px}
.group-h b{font-family:var(--f-display);font-weight:600;font-size:16px;text-transform:capitalize}
.group-h span{color:var(--muted);font-size:13px}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;border-top:1px solid var(--line);padding:4px 0}
.lrow:first-child{border-top:0}
.chk{width:30px;height:30px;border-radius:50%;border:1.8px solid var(--line-2);background:transparent;display:grid;place-items:center;color:transparent;font-weight:900;font-size:14px;margin-left:4px;transition:transform .15s var(--ease),border-color .2s,background .2s,color .2s}
.chk:hover{border-color:var(--good);color:rgba(47,209,139,.6)}
.chk:active{transform:scale(.85)}
.chk[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#06140d;animation:pop .35s var(--ease)}
@keyframes pop{40%{transform:scale(1.18)}}
.lmain{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:12px;width:100%;transition:background .2s}
.lmain:hover{background:var(--surface-2)}
.lmain .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmain .m{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmain .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lmain .v{font-weight:600;white-space:nowrap}
.lmain .v.in{color:var(--in)}
.tag{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:6px;background:var(--surface-3);color:var(--muted);margin-left:6px;vertical-align:1px}

.prev{display:flex;flex-direction:column}
.prev div{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line-2);font-size:14.5px}
.prev div span{color:var(--muted)}
.prev div b{font-variant-numeric:tabular-nums}
.prev .total{border-bottom:0;padding-top:14px;align-items:baseline}
.prev .total span{color:var(--ink);font-weight:600}
.prev .total b{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.note{font-size:12.5px;color:var(--muted);margin:0}
.fx{display:flex;flex-direction:column;gap:8px}
.fx-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-3);gap:2px}
.fx-bar i{display:block;height:100%;transform-origin:left;animation:grow .9s var(--ease) both}
.fx-leg{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.fx-leg b{color:var(--ink)}

.table-wrap{overflow-x:auto}
table.fech{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;font-variant-numeric:tabular-nums}
table.fech th,table.fech td{padding:11px 8px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
table.fech th:first-child,table.fech td:first-child{text-align:left}
table.fech thead th{border-top:0;font-size:12.5px;color:var(--muted);font-weight:500}
table.fech tbody tr{cursor:pointer;transition:background .15s}
table.fech tbody tr:hover td{background:var(--surface-2)}
table.fech tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.fech td:first-child{text-transform:capitalize;font-weight:600}
table.fech tfoot td{font-weight:600;border-top:2px solid var(--line-2)}
table.fech .prev-tag{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:none;background:var(--surface-3);padding:1px 6px;border-radius:5px;margin-left:4px}

.logo{width:36px;height:36px;border-radius:11px;object-fit:cover;flex:none;background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.logo.on-grad{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.logo.sm{width:18px;height:18px;border-radius:5px;vertical-align:-4px;margin-right:7px;box-shadow:none}

/* ---------- janelas ---------- */
.backdrop{position:fixed;inset:0;z-index:50;background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:640px){.backdrop{align-items:center}}
.sheet{background:var(--surface);width:100%;max-width:470px;border-radius:16px 16px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow:auto;border:1px solid var(--line-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
@media (min-width:640px){.sheet{border-radius:12px;padding:24px}}
.sheet h3{font-size:19px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field select{border:1px solid var(--line-2);background:var(--bg-2);border-radius:8px;padding:11px 13px;font-size:16px;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field input::-webkit-calendar-picker-indicator{filter:invert(.8)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;padding:3px}
.seg button{border:0;background:transparent;border-radius:6px;padding:9px;font-weight:500;color:var(--muted);transition:background .25s var(--ease),color .2s}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink);font-weight:600}
.sheet-actions{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;padding-top:4px}
.sheet-actions .r{display:flex;gap:8px;margin-left:auto}
.info-list{display:flex;flex-direction:column;gap:8px;font-size:14px}
.info-list div{display:flex;justify-content:space-between;gap:10px}
.info-list span{color:var(--muted)}
.sheet .items{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto;font-size:14px}
.sheet .items div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.sheet .items span{color:var(--muted)}
.sheet .rec-list{display:flex;flex-direction:column;gap:6px}
.sheet .rec-list button{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:10px 12px;transition:border-color .2s,transform .15s}
.sheet .rec-list button:hover{border-color:var(--accent);transform:translateX(2px)}
.sheet .rec-list small{display:block;color:var(--muted);font-size:12.5px}
.sheet .hint{font-size:13px;color:var(--muted);margin:0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);box-shadow:0 14px 40px -10px rgba(0,0,0,.9)}
.toast::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:9px;vertical-align:1px}
@media (min-width:900px){.toast{bottom:28px}}

.gate{position:fixed;inset:0;z-index:40;background:var(--bg);display:grid;place-items:center;padding:24px 16px;overflow:auto;
  background-image:radial-gradient(700px 400px at 100% 0%,rgba(212,167,44,.07),transparent 60%),radial-gradient(600px 380px at 0% 100%,rgba(124,192,248,.05),transparent 60%)}
.gate-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:30px 22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:16px}
.gate-card .brand-mark{width:56px;height:56px;border-radius:17px;font-size:26px;margin-inline:auto}
.gate-card h1{font-size:22px;text-align:center}
.gate-card p{margin:0;color:var(--muted);text-align:center;font-size:14px}
.gate-card .btn{padding:12px}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:up .28s var(--ease)}
  @keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
  .backdrop{animation:fade .2s ease-out}
  main > .view:not([hidden]){animation:enter .35s var(--ease)}
  @keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}}
  .toast{animation:toastIn .3s var(--ease)}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}}
  .sync.busy i{animation:blink 1s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker{overflow-x:auto}
  .cc{transform:none!important}
}

/* listas do mês no Início */
.grid-eq{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid-eq{grid-template-columns:1fr 1fr;gap:18px}}
.ph-r{display:flex;align-items:center;gap:8px}
.ph-r .btn.small{padding:6px 8px}
.mini-sum{display:flex;gap:8px;flex-wrap:wrap}
.mini-sum:empty{display:none}
.mini-sum span{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.mini-sum b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.mini-sum .bar{flex:1 1 100%;height:6px;margin-top:2px}
.more{align-self:center;margin-top:4px}