/* Finanças do Marcos — tema escuro (grafite + dourado) */
:root{
  color-scheme:dark;
  --bg:#0B0C0E; --bg-2:#08090A; --surface:#131417; --surface-2:#1A1B1F; --surface-3:#24252A;
  --line:#212227; --line-2:#2E3036; --ink:#F1F2F4; --muted:#A3A6AE; --dim:#6A6D76;
  --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(0,0,0,.76);
  --glass:rgba(8,9,10,.86);
  --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:640px){#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,#1C1D21 0%,#141518 55%,#0F1012 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}

/* faixa de investimentos e metas */
.tk{align-items:center}
.tk .logo.sm{margin-right:0}
.tk .emo{font-size:14px;line-height:1}
.tk i.up{color:var(--in)} .tk i.dim{color:var(--muted);font-weight:600}
.tk-sec{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(90deg,rgba(212,167,44,.10),transparent)}
.tk-sec span{color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600}
.tk-sec em{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(212,167,44,.6);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(212,167,44,.55)}80%,100%{box-shadow:0 0 0 7px rgba(212,167,44,0)}}
.mb{position:relative;display:inline-block;width:52px;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden;align-self:center}
.mb i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:var(--accent);animation:fillin 1.2s var(--ease) both}
.mb.ok i{background:var(--in)}
.mb i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shine 2.6s ease-in-out infinite}
@keyframes fillin{from{width:0}}
@keyframes shine{60%,100%{transform:translateX(100%)}}

/* ---------- listas enxutas do Início ---------- */
.grid-eq .panel{gap:10px}
.msum{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.msum b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;margin-left:3px}
.bar.thin{height:3px;margin-bottom:6px}
.bar.thin i{position:relative;overflow:hidden}
.bar.thin i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:shine 3.2s ease-in-out infinite}
.mgrp{display:flex;flex-direction:column}
.mgrp + .mgrp{margin-top:10px}
.mgrp-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 2px 4px}
.mgrp-h i{width:8px;height:8px;border-radius:2px;flex:none}
.mgrp-h span{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.mhid{font-size:12px;color:var(--dim);padding:2px 0 0 34px}
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px;border-radius:10px;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes rowin{from{opacity:0;transform:translateY(4px)}}
.mchk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;display:grid;place-items:center;color:transparent;font-size:11px;font-weight:900;transition:transform .15s var(--ease),border-color .2s,background .2s,color .2s}
.mchk:hover{border-color:var(--good);color:rgba(46,189,107,.7)}
.mchk:active{transform:scale(.85)}
.mchk[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#06140d;animation:pop .35s var(--ease)}
.mmain{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;border:0;background:transparent;text-align:left;padding:7px 8px;border-radius:8px;transition:background .2s}
.mmain:hover{background:var(--surface-2)}
.mname{display:flex;align-items:baseline;gap:0 8px;flex-wrap:wrap;min-width:0}
.mname .logo.sm{align-self:center;margin-right:0}
.mt{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mname small{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mval{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.mval b{font-weight:600;font-size:14px}
.mval b.in{color:var(--in)}
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim)}
.st.good{color:var(--good)}.st.good::before{background:var(--good)}
.st.warn{color:var(--warn)}.st.warn::before{background:var(--warn)}
.st.crit{color:var(--crit)}.st.crit::before{background:var(--crit)}
.st.vivo::before{animation:pulsa 1.6s ease-out infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 6px transparent}}
.mmore{align-self:center;margin-top:6px;border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;padding:6px 10px;border-radius:6px;transition:color .2s,background .2s}
.mmore:hover{color:var(--ink);background:var(--surface-2)}
/* total do bloco "respira" de leve */
#inTot,#outTot{position:relative}
#inTot:not(:empty)::after,#outTot:not(:empty)::after{content:"";position:absolute;right:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--in);animation:ping2 2.4s ease-out infinite}
#outTot:not(:empty)::after{background:var(--out)}
@keyframes ping2{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}70%,100%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.msum-box{display:flex;flex-direction:column;gap:8px}
.msum-box:empty{display:none}
.grid-eq .panel-h .aside{border:0;padding:0 6px 0 0;font-size:15px;color:var(--ink);font-weight:600;background:transparent}
/* área dos gráficos com fundo de "tela de corretora" */
.chart-box{border-radius:8px;background:radial-gradient(120% 90% at 50% 110%,rgba(61,139,255,.07),transparent 60%),radial-gradient(80% 60% at 90% -10%,rgba(61,255,138,.05),transparent 60%)}

/* ---------- Início: cartões e patrimônio ---------- */
.hbody{display:flex;flex-direction:column;gap:6px}
.hlist{display:flex;flex-direction:column;gap:2px}
.hrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:0;background:transparent;text-align:left;padding:8px;border-radius:8px;transition:background .2s;animation:rowin .45s var(--ease) both}
.hrow:hover{background:var(--surface-2)}
.hrow .logo{width:32px;height:32px;border-radius:50%}
.hmid{display:flex;flex-direction:column;gap:3px;min-width:0}
.hmid small{font-size:11.5px;color:var(--dim)}
.hmid .bar.thin{margin:2px 0 0;max-width:180px}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hstats div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;min-width:0}
.hstats span{font-size:11.5px;color:var(--muted)}
.hstats b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hsub b{text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600;font-size:12.5px}
.hsub + .bar.thin{margin:2px 0 0}
.hmini{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(48px,auto);align-items:center;gap:12px;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:8px;font-size:13.5px;transition:background .2s;animation:rowin .45s var(--ease) both}
.hmini:hover{background:var(--surface-2)}
.hmini > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmini .bar.thin{margin:0}
.hmini small,.hmini b{text-align:right;font-size:12.5px;font-weight:600}
.hmini small{color:var(--muted)}
@media (max-width:420px){.hstats{grid-template-columns:1fr 1fr}.hmini{grid-template-columns:minmax(0,1fr) 56px minmax(40px,auto)}}

/* gráfico de composição do patrimônio no Início */
.hpat{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:18px;margin-bottom:4px}
.chart-box.pat{height:170px;background:radial-gradient(circle at 50% 50%,rgba(52,231,240,.07),transparent 65%)}
.pat-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.pat-center small{font-size:11px;color:var(--muted)}
.pat-center b{font-size:14.5px;font-weight:700}
.pat-leg{display:flex;flex-direction:column;gap:7px;min-width:0}
.pat-leg div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 40px;align-items:center;gap:9px;font-size:13px}
.pat-leg i{width:9px;height:9px;border-radius:3px}
.pat-leg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pat-leg b{font-weight:600}
.pat-leg small{text-align:right;color:var(--dim);font-weight:600}
@media (max-width:420px){.hpat{grid-template-columns:1fr}.chart-box.pat{max-width:200px;margin-inline:auto;width:100%}}
.chart-box canvas{max-width:100%}

/* ---------- cartões com cara de cartão ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pcard{position:relative;overflow:hidden;aspect-ratio:1.586;max-width:100%;border:0;border-radius:14px;padding:14px 16px;color:#fff;text-align:left;
  background:var(--cbg);display:grid;grid-template-rows:auto auto 1fr auto;gap:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -14px rgba(0,0,0,.9);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease),box-shadow .35s;animation:rowin .5s var(--ease) both}
.pcard:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 24px 44px -18px rgba(0,0,0,.95)}
/* textura e brilho */
.pcard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 110% -10%,rgba(255,255,255,.28),transparent 45%),radial-gradient(90% 70% at -20% 120%,rgba(0,0,0,.35),transparent 55%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.pcard::after{content:"";position:absolute;top:-50%;bottom:-50%;width:40%;left:-60%;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .8s var(--ease)}
.pcard:hover::after{left:130%}
.pcard > *{position:relative;z-index:1}
.pc-top{display:flex;align-items:center;gap:10px;min-width:0}
.pc-top .logo{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.pc-top b{font-size:15px;font-weight:700;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-nfc{width:20px;height:20px;margin-left:auto;opacity:.85;flex:none}
.pc-row{display:flex;align-items:center;gap:12px;margin-top:4px}
.pc-chip{width:34px;height:25px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,#F6E3A1 0%,#D9B45A 45%,#B98A2E 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative}
.pc-chip::before{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.28);border-radius:3px}
.pc-chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.28)}
.pc-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.12em;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.pc-mid{display:flex;flex-direction:column;gap:0;align-self:end}
.pc-mid small{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.08em}
.pc-mid b{font-size:20px;line-height:1.2;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pc-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-bot .st{color:#fff;background:rgba(0,0,0,.28);padding:3px 8px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pc-bot .st.good::before{background:#6CFFB0}.pc-bot .st.warn::before{background:#FFD35C}.pc-bot .st.crit::before{background:#FF7A93}.pc-bot .st.neutral::before{background:#fff}
.pc-brand{font-size:11px;font-weight:800;font-style:italic;letter-spacing:.08em;opacity:.9}
.pc-lim{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.25)}
.pc-lim i{display:block;height:100%;background:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){.pcard{transform:none!important}.pcard::after{display:none}}

/* aba Cartões: mesma cor de cada banco */
.cc.cc-banco{background:var(--cbg);border-color:rgba(255,255,255,.12);color:#fff}
.cc.cc-banco::after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.cc.cc-banco .cc-code,.cc.cc-banco .lbl-s,.cc.cc-banco .meta-line,.cc.cc-banco .fat-list span{color:rgba(255,255,255,.78)}
.cc.cc-banco .fat-list{border-top-color:rgba(255,255,255,.25)}
.cc.cc-banco .btn{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.3);color:#fff}
.cc.cc-banco .btn:hover{background:rgba(0,0,0,.35);border-color:#fff}
.cc.cc-banco .bar{background:rgba(0,0,0,.25)}
.cc.cc-banco .pill{background:rgba(0,0,0,.28);color:#fff}

/* ---------- destaque: investimentos ---------- */
.feat{display:grid;grid-template-columns:1fr;gap:18px;padding:22px;border-color:rgba(212,167,44,.42);
  background:radial-gradient(90% 120% at 0% 0%,rgba(212,167,44,.13),transparent 55%),radial-gradient(60% 90% at 100% 100%,rgba(61,139,255,.06),transparent 60%),var(--surface);
  box-shadow:0 0 0 1px rgba(212,167,44,.12),0 24px 60px -34px rgba(212,167,44,.45)}
.feat:hover{border-color:rgba(212,167,44,.65)}
@media (min-width:900px){.feat{grid-template-columns:270px minmax(0,1fr);gap:24px}}
.feat-l{display:flex;flex-direction:column;gap:8px;position:relative}

.feat-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.feat-tag em{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:ping 1.8s ease-out infinite}
.feat-big{font-size:clamp(28px,6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1;background:linear-gradient(90deg,#fff 0%,#F3DC9A 60%,#D4A72C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.feat-sub{font-size:13px;color:var(--muted)}
.feat-meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-top:6px}
.feat-meta b{color:var(--ink);font-weight:600}
.feat-l .bar i{background:var(--gold)}
.feat-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.feat-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start}
.itile{display:flex;flex-direction:column;gap:7px;text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:12px;min-width:0;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.itile:hover{transform:translateY(-3px);border-color:rgba(212,167,44,.55);box-shadow:0 14px 28px -16px rgba(0,0,0,.9)}
.itile.zero{opacity:.62}
.itile.zero:hover{opacity:1}
.it-top{display:flex;align-items:center;gap:10px;min-width:0}
.it-top .logo{width:30px;height:30px;border-radius:50%}
.it-nm{display:flex;flex-direction:column;min-width:0}
.it-nm b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-nm small{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-val{font-size:17px;font-weight:700}
.itile .bar.thin{margin:0}
.it-meta{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted)}

/* gráfico ao vivo no fundo do card de investimentos */
.feat{overflow:hidden}
.feat-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.30;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.15) 100%)}
.itile{background:rgba(8,9,10,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Início: sem título, seletor de mês centralizado e discreto */
body[data-view="inicio"] .top{justify-content:center;padding-block:14px 12px}
body[data-view="inicio"] .top h1{display:none}
body[data-view="inicio"] .top-actions{width:auto}
body[data-view="inicio"] .month{flex:none;background:transparent;border-color:transparent;padding:0;gap:2px;transition:border-color .2s,background .2s}
body[data-view="inicio"] .month:hover{border-color:var(--line);background:var(--surface)}
body[data-view="inicio"] .month span{min-width:112px;font-size:13px;font-weight:500;color:var(--muted)}
body[data-view="inicio"] .month:hover span{color:var(--ink)}
body[data-view="inicio"] .month button{width:28px;height:28px;font-size:16px;color:var(--dim)}

/* faixa única de números do mês (minimalista) */
.kstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kstrip .kpi{border:0;border-radius:0;background:transparent;box-shadow:none;padding:14px 16px;gap:4px;transform:none!important;border-top:1px solid var(--line)}
.kstrip .kpi::before{display:none}
.kstrip .kpi:hover{background:var(--surface-2);box-shadow:none}
.kstrip .kpi .lbl{font-size:12px;font-weight:500;color:var(--muted)}
.kstrip .kpi .val{font-size:clamp(17px,4vw,21px);font-weight:600;padding:0!important}
.kstrip .kpi .sub{font-size:11.5px;color:var(--dim);padding:0!important}
.kstrip #kSaldo{grid-column:1 / -1;border-top:0}
.kstrip .kpi:nth-child(even){border-right:1px solid var(--line)}
@media (min-width:760px){
  .kstrip{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kstrip .kpi{border-top:0;border-right:1px solid var(--line)!important}
  .kstrip .kpi:last-child{border-right:0!important}
  .kstrip #kSaldo{grid-column:auto}
}
/* sobra com fundo colorido */
.kstrip .ksobra{position:relative}
.kstrip .ksobra.pos-bg{background:linear-gradient(160deg,rgba(46,189,107,.22),rgba(46,189,107,.07))}
.kstrip .ksobra.neg-bg{background:linear-gradient(160deg,rgba(240,80,110,.24),rgba(240,80,110,.07))}
.kstrip .ksobra.pos-bg .lbl{color:var(--good)} .kstrip .ksobra.neg-bg .lbl{color:var(--crit)}
.kstrip .ksobra.pos-bg:hover{background:linear-gradient(160deg,rgba(46,189,107,.28),rgba(46,189,107,.1))}
.kstrip .ksobra.neg-bg:hover{background:linear-gradient(160deg,rgba(240,80,110,.3),rgba(240,80,110,.1))}
.kstrip .ksobra::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;opacity:.9}
.kstrip .ksobra.pos-bg::after{background:var(--good);box-shadow:0 0 12px var(--good)}
.kstrip .ksobra.neg-bg::after{background:var(--crit);box-shadow:0 0 12px var(--crit)}

/* ---------- espaçamento padronizado ---------- */
:root{--gap:16px;--pad:18px}
@media (min-width:900px){:root{--gap:20px;--pad:20px}}
main > .view,.view{gap:var(--gap)}
.grid2,.grid-eq,.kpis,.cards,#patInv{gap:var(--gap)}
@media (min-width:900px){.grid2,.grid-eq,.kpis,.cards{gap:var(--gap)}}
.panel,.feat,.card,.cc{padding:var(--pad)}
.panel,.grid-eq .panel{gap:12px}
.kstrip .kpi{padding:14px var(--pad)}
.banner{margin-bottom:var(--gap)}
.top{padding-block:var(--gap)}
body[data-view="inicio"] .top{padding-block:12px}
.panel > .panel-h:first-child{padding-bottom:12px;margin-bottom:0}

/* ícones dos lançamentos */
.uico{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:6px;background:var(--surface-3);font-size:13px;line-height:1;vertical-align:-5px;flex:none}
.mname .uico{align-self:center;margin-right:0}
.ico-pick{display:flex;flex-direction:column;gap:8px}
.ico-in{width:56px!important;text-align:center;font-size:20px!important;padding:6px!important}
.ico-sug{display:flex;flex-wrap:wrap;gap:4px}
.ico-sug button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg-2);font-size:17px;line-height:1;display:grid;place-items:center;transition:transform .12s var(--ease),border-color .2s,background .2s}
.ico-sug button:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ico-sug button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.ico-sug .ico-none{width:auto;padding:0 10px;font-size:12px;color:var(--muted)}

.uimg{object-fit:cover;padding:0;background:#fff}
img.uico{width:22px;height:22px;border-radius:6px;margin-right:7px;vertical-align:-5px}
.mname img.uico{margin-right:0}
.ico-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ico-prev{width:44px;height:44px;border-radius:10px;border:1px dashed var(--line-2);display:grid;place-items:center;font-size:22px;color:var(--dim);overflow:hidden;flex:none}
.ico-prev img{width:100%;height:100%;object-fit:cover}
.ico-up{cursor:pointer}
.ico-sug button img{width:24px;height:24px;border-radius:5px;object-fit:cover}
.ico-lib{padding-bottom:6px;border-bottom:1px dashed var(--line)}

/* checkmarks sutis */
.mchk,.chk{width:18px;height:18px;border-width:1.2px;border-color:var(--line-2);font-size:10px;background:transparent}
.chk{margin-left:6px}
.mchk:hover,.chk:hover{border-color:rgba(46,189,107,.6);color:rgba(46,189,107,.55);background:transparent}
.mchk[aria-pressed="true"],.chk[aria-pressed="true"]{background:rgba(46,189,107,.1);border-color:rgba(46,189,107,.45);color:var(--good);animation:none}
.mchk[aria-pressed="true"]:hover,.chk[aria-pressed="true"]:hover{background:rgba(46,189,107,.18)}

/* checkmarks ainda mais sutis + pulso quando marcado */
.mchk,.chk{width:16px;height:16px;border-width:1px;border-color:rgba(255,255,255,.14);font-size:9px;background:transparent;color:transparent}
.mchk:hover,.chk:hover{border-color:rgba(46,189,107,.5);color:rgba(46,189,107,.45);background:transparent}
.mchk[aria-pressed="true"],.chk[aria-pressed="true"]{background:transparent;border-color:rgba(46,189,107,.4);color:rgba(46,189,107,.9);animation:marcado 2.6s ease-out infinite}
.mchk[aria-pressed="true"]:hover,.chk[aria-pressed="true"]:hover{background:rgba(46,189,107,.08)}
@keyframes marcado{0%{box-shadow:0 0 0 0 rgba(46,189,107,.35)}70%,100%{box-shadow:0 0 0 6px rgba(46,189,107,0)}}
@media (prefers-reduced-motion:reduce){.mchk[aria-pressed="true"],.chk[aria-pressed="true"]{animation:none}}

/* marcado = bolinha toda preenchida, sem o sinal de ✓ */
.mchk,.chk,.mchk:hover,.chk:hover{color:transparent!important}
.mchk:hover,.chk:hover{background:rgba(46,189,107,.12)}
.mchk[aria-pressed="true"],.chk[aria-pressed="true"]{background:var(--good);border-color:var(--good)}
.mchk[aria-pressed="true"]:hover,.chk[aria-pressed="true"]:hover{background:#3fd27f;border-color:#3fd27f}

/* marcado como pago/recebido */
.tag-ok{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:5px;background:rgba(46,189,107,.14);color:var(--good);margin-left:6px;vertical-align:1px;white-space:nowrap;align-self:center;animation:tagin .3s var(--ease)}
@keyframes tagin{from{opacity:0;transform:scale(.85)}}
.mrow.feito .mt,.mrow.feito .mval b{color:var(--muted)}
.mrow.feito .mname small{opacity:.7}
.mrow.feito .uico,.mrow.feito .logo{opacity:.6}
.lmain .tag-ok{margin-left:8px}

/* explicação curta em cada número da faixa */
.kstrip .kpi .q{font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:-1px}
.kstrip .kpi .sub{margin-top:2px}
.kstrip .ksobra .q{color:inherit;opacity:.75}
.kstrip #kSaldo.velho .sub{color:var(--warn,#E0A526)}

/* ---------- logo mkBANK centralizada ---------- */
.topbar-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.top-left{display:flex;align-items:center;min-width:0}
.top-right{justify-self:end;margin-left:0}
.mklogo{--lh:30px;position:relative;display:block;height:var(--lh);width:calc(var(--lh)*4.667);margin:0;flex:none;justify-self:center}
.mklogo .lg{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background-size:300% 100%;background-position:100% 0;animation:logoBrilho 5.5s var(--ease,ease) infinite}
.mklogo .lg-mk{-webkit-mask-image:url(icons/logo/mk.png);mask-image:url(icons/logo/mk.png);
  background-image:linear-gradient(105deg,#D9DAE0 0%,#D9DAE0 40%,#FFFFFF 48%,#FFF6DA 50%,#D9DAE0 58%,#D9DAE0 100%)}
.mklogo .lg-bank{-webkit-mask-image:url(icons/logo/bank.png);mask-image:url(icons/logo/bank.png);
  background-image:linear-gradient(105deg,#C99A22 0%,#D4A72C 40%,#FFE9A6 48%,#FFF7DC 50%,#E0B642 58%,#C99A22 100%)}
.mklogo::after{content:"";position:absolute;inset:-40% -12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(212,167,44,.20),transparent);opacity:.35;animation:logoAura 5.5s ease-in-out infinite;pointer-events:none}
@keyframes logoBrilho{0%{background-position:100% 0}45%,100%{background-position:0% 0}}
@keyframes logoAura{0%,100%{opacity:.25;transform:scale(.95)}35%{opacity:.7;transform:scale(1.04)}}
.mklogo:hover .lg{animation-duration:2.2s}
.gate-logo{--lh:40px;margin:0 auto 6px}
@media (max-width:520px){.mklogo{--lh:24px}}
@media (max-width:430px){#syncTxt{display:none}.sync{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.mklogo .lg,.mklogo::after{animation:none}.mklogo .lg{background-position:50% 0}}

/* ---------- v28 ---------- */
/* bolinha de marcar 60% menor (área de toque continua confortável) */
.mchk,.chk{position:relative;width:7px!important;height:7px!important;min-width:7px;padding:0;border-width:1px;border-color:rgba(255,255,255,.32);flex:none;margin:0 6px}
.mchk::after,.chk::after{content:"";position:absolute;inset:-12px}
.mchk[aria-pressed="true"],.chk[aria-pressed="true"]{border-color:var(--good)}
@keyframes marcado{0%{box-shadow:0 0 0 0 rgba(46,189,107,.45)}70%,100%{box-shadow:0 0 0 5px rgba(46,189,107,0)}}
/* cartões do Início um abaixo do outro */
#hcBody .pcards{grid-template-columns:1fr}
#hcBody .pcard{aspect-ratio:auto;min-height:170px;gap:10px}
/* aba Cartões: cartão real + detalhes */
.ccx{display:flex;flex-direction:column;gap:0;min-width:0}
.ccx .pcard{width:100%;aspect-ratio:1.586;position:relative;z-index:1;cursor:pointer}
.ccx .pcard .pc-mid b{font-size:24px}
.ccx-info{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;margin:-14px 8px 0;padding:26px 16px 16px;display:flex;flex-direction:column;gap:12px}
.ccx-info .lbl-s{font-size:12.5px;color:var(--muted);font-weight:500}
.ccx-info .fat-list{display:flex;flex-direction:column;gap:6px;font-size:13.5px;border-top:1px dashed var(--line-2);padding-top:10px}
.ccx-info .fat-list div{display:flex;justify-content:space-between;gap:10px}
.ccx-info .fat-list span{color:var(--muted);text-transform:capitalize}
#cardList{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
/* metas compactas no Patrimônio */
.mt-list{display:flex;flex-direction:column}
.mt-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.mt-row:first-child{border-top:0;padding-top:2px}
.mt-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:transparent;text-align:left;padding:4px;border-radius:8px;transition:background .2s}
.mt-main:hover{background:var(--surface-2)}
.mt-main .ico{width:34px;height:34px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:17px;flex:none}
.mt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mt-txt b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-txt small{font-size:12px;color:var(--muted)}
.mt-p{font-weight:600;font-size:13px;color:var(--muted);min-width:38px;text-align:right}
.mt-p.ok{color:var(--good)}
/* legenda das velas */
.vela-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--dim);margin-top:10px}
.vela-leg span{display:inline-flex;align-items:center;gap:6px}
.vela-leg i{display:inline-block;flex:none}
.vl-g,.vl-r,.vl-c,.vl-f{width:8px;height:12px;border-radius:2px}
.vl-g{background:#3DFF8A;box-shadow:0 0 6px #3DFF8A}.vl-r{background:#FF3B5C;box-shadow:0 0 6px #FF3B5C}
.vl-c{background:#FFE45C;box-shadow:0 0 6px #FFE45C}
.vl-p{width:2px;height:12px;background:#FFE45C;opacity:.6}
@media (max-width:520px){.mt-row .lbl-g{display:none}.mt-row .btn{min-width:36px;justify-content:center}#aMetas{display:none}.mt-main{gap:10px}.mt-main .ico{width:30px;height:30px;font-size:15px}}

/* botão de backup no topo */
.top-left{gap:8px}
.bkp{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(212,167,44,.45);background:rgba(212,167,44,.08);color:var(--accent-2);border-radius:8px;padding:7px 12px;font-weight:600;font-size:12.5px;white-space:nowrap;transition:background .2s,border-color .2s,transform .15s}
.bkp:hover{background:rgba(212,167,44,.16);border-color:var(--accent)}
.bkp:active{transform:scale(.96)}
.bkp em{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg);animation:marcado 2.4s ease-out infinite}
@media (max-width:640px){.bkp span{display:none}.bkp{padding:8px 10px}}
.bkp-big{width:100%;justify-content:center;gap:8px;padding:13px}
.bkp-rest{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line-2);padding-top:14px}
.bkp-rest small{color:var(--muted);font-size:12.5px;line-height:1.4}
.bkp-rest code{font-size:11.5px;background:var(--surface-3);padding:1px 5px;border-radius:4px}
.bkp-file{cursor:pointer;justify-content:center}
.bkp-info{display:flex;flex-direction:column;gap:3px;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.bkp-info span{color:var(--muted)}

/* v30: cartões do Início em tamanho de cartão real, centralizados */
#hcBody .pcards{grid-template-columns:minmax(0,340px);justify-content:center;gap:14px}
#hcBody .pcard{aspect-ratio:1.586;min-height:0;width:100%}

/* explicação ao vivo no formulário de compra no cartão */
.expl{background:rgba(212,167,44,.07);border:1px solid rgba(212,167,44,.28);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.expl:empty{display:none}
.expl b{color:var(--accent-2);font-weight:600}

/* v34: abas por cartão */
#cardTabs:empty{display:none}
.ctab{display:inline-flex;align-items:center;gap:6px}
.ctab .logo.sm{margin-right:0}
.fat-list .fl-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.fat-list small{color:var(--dim);font-size:11.5px;margin-left:6px;text-transform:none}
.fat-list .fl-h span{text-transform:none!important}
.ccx-info .split{flex-wrap:nowrap;align-items:flex-end}.ccx-info .split > div:last-child{flex:none}

/* v35: cartões lado a lado, selecionado mostra as faturas */
#cardList{grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:18px}
.csel{display:flex;flex-direction:column;gap:8px;align-items:center}
.csel .pcard{width:100%;aspect-ratio:1.586;cursor:pointer;transition:transform .25s var(--ease),opacity .25s,box-shadow .25s,outline-color .25s;outline:2px solid transparent;outline-offset:4px}
.csel:not(.on) .pcard{opacity:.62;filter:saturate(.8)}
.csel:not(.on) .pcard:hover{opacity:.9}
.csel.on .pcard{outline-color:var(--accent);transform:translateY(-2px)}
.csel-tag{font-size:12px;color:var(--accent-2);font-weight:500}
.csel-tag.dim{color:var(--dim);font-weight:400}
.ccx-info.det{background:transparent;border:0;margin:0;padding:0}

.fat-det summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0}
.fat-det[open] summary{margin-bottom:8px}

.fat-list .fl-row{cursor:pointer;border-radius:6px;margin:0 -6px;padding:3px 6px;transition:background .15s}
.fat-list .fl-row:hover{background:var(--surface-2)}

/* meses de cada parcela */
.pmeses{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pmeses i{font-style:normal;display:inline-flex;flex-direction:column;align-items:center;min-width:46px;padding:3px 6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:10.5px;color:var(--muted);line-height:1.25}
.pmeses i b{font-weight:600;color:var(--ink);font-size:11px;text-transform:capitalize}
.pmeses i.on{border-color:rgba(212,167,44,.55);background:rgba(212,167,44,.1)}
.pmeses i.on b{color:var(--accent-2)}
.pmeses i b{text-transform:none}

/* v42 */
.pc-midrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;align-self:stretch}
.pc-debt{text-align:right;align-items:flex-end}
.pc-debt b{font-size:15px!important;opacity:.95}
.fat-list .fl-row.pago{background:rgba(46,189,107,.07);box-shadow:inset 2px 0 0 rgba(46,189,107,.55)}
.fat-list .fl-row.pago b{color:var(--good)}
.fl-ok{font-style:normal;font-size:10.5px;font-weight:600;color:var(--good);background:rgba(46,189,107,.14);padding:2px 7px;border-radius:5px;margin-left:8px;vertical-align:1px}

/* v43: faixa de números na ordem do raciocínio, com ícones e barrinhas */
.kstrip .kpi{gap:6px;text-align:left}
.kstrip .kpi .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.kstrip .kic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--muted)}
.kstrip .kic svg,.kstrip .kedit svg{width:14px;height:14px}
.kstrip .k-in .kic{background:rgba(46,189,107,.14);color:var(--good)}
.kstrip .k-out .kic{background:rgba(240,80,110,.14);color:var(--crit)}
.kstrip .ksobra .kic{background:rgba(255,255,255,.08);color:inherit}
.kstrip .ksobra.pos-bg .kic{color:var(--good)} .kstrip .ksobra.neg-bg .kic{color:var(--crit)}
.kstrip .k-saldo .kic{background:rgba(124,192,248,.14);color:#7CC0F8}
.kstrip .k-prev .kic{background:rgba(212,167,44,.14);color:var(--accent)}
.kstrip .kedit{margin-left:auto;color:var(--dim);opacity:0;transition:opacity .2s;display:grid}
.kstrip .k-saldo:hover .kedit,.kstrip .k-saldo:focus-visible .kedit{opacity:1}
.kstrip .kpi .val{font-size:clamp(18px,4.2vw,23px);letter-spacing:-.01em}
.kstrip .kpi .sub{font-size:11.5px;color:var(--dim);line-height:1.35}
.kstrip .kpi .sub b{color:var(--muted);font-weight:600}
.kbar{display:block;height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin:1px 0 1px}
.kbar i{display:block;height:100%;width:0;border-radius:3px;transition:width .8s var(--ease)}
.k-in .kbar i{background:var(--good)} .k-out .kbar i{background:var(--crit)}
.kstrip .k-prev .val{color:var(--accent-2)}
/* celular: A receber | A pagar · Sobra | Saldo · Previsto inteiro */
.kstrip #kSaldo{grid-column:auto;border-top:1px solid var(--line)}
.kstrip .k-in{border-top:0!important}
.kstrip .k-out{border-top:0!important}
.kstrip .kpi:nth-child(odd){border-right:1px solid var(--line)}
.kstrip .kpi:nth-child(even){border-right:0}
.kstrip .k-prev{grid-column:1 / -1;border-right:0!important}
@media (min-width:760px){
  .kstrip .k-prev{grid-column:auto}
  .kstrip .kpi{border-top:0!important;border-right:1px solid var(--line)!important}
  .kstrip .kpi:last-child{border-right:0!important}
}
.kstrip .kpi .sub{margin-top:auto;padding-top:2px!important}

/* ---------- marca mkFLOW ---------- */
.mflogo{--h:30px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;justify-self:center;line-height:1}
.mf-sym{width:var(--h);height:var(--h);flex:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(212,167,44,.28))}
.mf-word{display:inline-flex;align-items:baseline;font-family:var(--f-display);font-size:calc(var(--h)*.78);letter-spacing:-.02em;white-space:nowrap}
.mf-mk{font-weight:400;color:#E6E7EC;margin-right:1px}
.mf-flow-t{display:inline-flex;align-items:center;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(100deg,#C99A22 0%,#E4B93E 38%,#FFF1C2 50%,#E4B93E 62%,#C99A22 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mfBrilho 6s ease-in-out infinite}
.mf-o{width:.8em;height:.8em;margin:0 .03em 0 .05em;flex:none;overflow:visible}
.mf-spin{transform-origin:12px 12px;animation:mfGira 9s linear infinite}
.mf-flow{stroke-dasharray:60 0}
.mf-glint{stroke-dasharray:9 91;stroke-dashoffset:9;opacity:.9;animation:mfCorre 4.2s cubic-bezier(.5,0,.3,1) infinite}
.mf-b1,.mf-b2,.mf-b3{transform-box:fill-box;transform-origin:50% 100%;animation:mfBarra 4.2s ease-in-out infinite}
.mf-b2{animation-delay:.18s}.mf-b3{animation-delay:.36s}
@keyframes mfBrilho{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
@keyframes mfGira{to{transform:rotate(360deg)}}
@keyframes mfCorre{0%{stroke-dashoffset:9}55%,100%{stroke-dashoffset:-100}}
@keyframes mfBarra{0%,70%,100%{transform:scaleY(1)}20%{transform:scaleY(1.1)}}
.mflogo:hover .mf-glint{animation-duration:1.8s}
.gate-logo.mflogo{--h:42px;margin:0 auto 8px;display:flex;justify-content:center}
@media (max-width:520px){.mflogo{--h:25px;gap:7px}}
@media (max-width:360px){.mflogo .mf-sym{display:none}}
@media (prefers-reduced-motion:reduce){.mf-flow-t,.mf-spin,.mf-glint,.mf-b1,.mf-b2,.mf-b3{animation:none}.mf-glint{opacity:0}}

/* sobra com entradas e gastos do mês */
.kflow{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:2px}
.kflow > span{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--dim)}
.kflow b{font-weight:600}
.kflow .kf-in b{color:var(--good)} .kflow .kf-out b{color:var(--crit)}
.kflow .kf-out{border-top:1px dashed rgba(255,255,255,.12);padding-top:2px}

/* cartões do Início: escolher um e ver as compras da fatura */
#hcBody .hc-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#hcBody .hc-cards .csel{align-items:stretch}
#hcBody .hc-cards .pcard{aspect-ratio:1.586;padding:12px 14px}
#hcBody .hc-cards .pc-mid b{font-size:17px}
#hcBody .hc-cards .pc-debt b{font-size:12.5px!important}
#hcBody .hc-cards .pc-top b{font-size:13.5px}
@media (max-width:520px){#hcBody .hc-cards{grid-template-columns:minmax(0,340px);justify-content:center}}
.hc-det{display:flex;flex-direction:column;gap:2px;margin-top:6px;border-top:1px solid var(--line);padding-top:12px;animation:rowin .35s var(--ease) both}
.hc-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.hc-h span{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hc-h small{margin-left:8px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
.hc-h b{font-size:15px;font-weight:700}
.hc-row{display:grid;grid-template-columns:minmax(0,1fr) auto 84px;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:7px 8px;border-radius:8px;font-size:13.5px;transition:background .2s;animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
.hc-row:hover{background:var(--surface-2)}
.hc-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-p{font-size:11.5px;color:var(--dim);white-space:nowrap}
.hc-p em{font-style:normal;font-weight:600;color:var(--accent-2);background:rgba(212,167,44,.1);padding:1px 6px;border-radius:5px;margin-right:6px}
.hc-row b{text-align:right;font-weight:600}
@media (max-width:420px){.hc-row{grid-template-columns:minmax(0,1fr) 76px}.hc-p{grid-column:1;grid-row:2;margin-top:-4px}}

/* metas em cards com anel de progresso */
.mtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mtile{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c,#888) 9%,var(--surface-2)) 0%,var(--bg-2) 100%);cursor:pointer;text-align:left;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.mtile:hover,.mtile:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c,#888) 45%,transparent);box-shadow:0 10px 26px -16px var(--c,#000)}
.mring{position:relative;width:48px;height:48px;display:grid;place-items:center}
.mring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.mring .rb{fill:none;stroke:rgba(255,255,255,.07);stroke-width:4}
.mring .rf{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-dashoffset:var(--off);filter:drop-shadow(0 0 4px var(--c));animation:anel 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes anel{from{stroke-dashoffset:120}}
.memo{font-size:20px;line-height:1;transition:transform .3s var(--ease)}
.mtile:hover .memo{transform:scale(1.15) rotate(-6deg)}
.mtxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mtxt b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtxt small{font-size:11.5px;color:var(--ink);opacity:.85}
.mtxt small i{font-style:normal;color:var(--dim)}
.mtxt em{font-style:normal;font-size:11px;color:var(--muted)}
.mtile.ok .mtxt em{color:var(--good);font-weight:600}
.mpct{font-size:14px;font-weight:700;color:var(--c)}
.madd{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:var(--surface);color:var(--c);font-size:16px;line-height:1;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.mtile:hover .madd,.mtile:focus-within .madd{opacity:1;transform:scale(1)}
.mtile:hover .mpct{opacity:0}
.mnew{border-style:dashed;background:transparent;--c:var(--accent)}
.mnew .mring{border:1.5px dashed var(--line-2);border-radius:50%}
.mnew .memo{font-size:18px;color:var(--accent)}
.mnew .mtxt small{color:var(--dim)}
@media (hover:none){.madd{opacity:1;transform:none}.mtile .mpct{display:none}}
@media (max-width:420px){.mtiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mring .rf{animation:none}}

/* para onde foi o dinheiro: gráfico + lista que abre */
.cat-wrap{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:start}
.cat-donut{position:relative;height:170px!important}
.cat-donut .pat-center small{font-size:10.5px}
.cat-list{display:flex;flex-direction:column;gap:4px;min-width:0}
.cat-row{border-radius:10px;transition:background .2s;animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
.cat-row.open{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.cat-h{width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto 14px;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:8px 10px 10px;border-radius:10px;position:relative;cursor:pointer}
.cat-h:hover{background:var(--surface-2)}
.cat-dot{width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c)}
.cat-n{display:flex;flex-direction:column;font-size:13.5px;font-weight:500;min-width:0}
.cat-n small,.cat-v small{font-size:11px;color:var(--dim);font-weight:400}
.cat-v{display:flex;flex-direction:column;align-items:flex-end;font-weight:600;font-size:13.5px}
.cat-chev{width:14px;height:14px;color:var(--dim);transition:transform .25s var(--ease)}
.cat-row.open .cat-chev{transform:rotate(90deg);color:var(--c)}
.cat-bar{position:absolute;left:30px;right:34px;bottom:4px;height:3px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
.cat-bar i{display:block;height:100%;background:var(--c);border-radius:3px;animation:catbar .9s var(--ease) both}
@keyframes catbar{from{width:0!important}}
.cat-it{display:flex;flex-direction:column;padding:2px 10px 10px 30px;animation:rowin .3s var(--ease) both}
.cat-it button{display:flex;justify-content:space-between;gap:10px;border:0;background:transparent;text-align:left;padding:5px 6px;border-radius:6px;font-size:12.5px;color:var(--muted);border-left:2px solid color-mix(in srgb,var(--c) 40%,transparent)}
.cat-it button:hover{background:var(--surface-2);color:var(--ink)}
.cat-it span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-it em{font-style:normal;font-size:10px;color:var(--good);margin-left:6px}
.cat-it b{font-weight:600;color:var(--ink)}
.cat-it small{font-size:11px;color:var(--dim);padding:4px 6px}
@media (max-width:520px){.cat-wrap{grid-template-columns:1fr}.cat-donut{max-width:190px;margin:0 auto}}

/* ---------- marca mkVAULT ---------- */
.mv-t{letter-spacing:.015em;align-items:baseline}
.mv-a{width:.62em;height:.73em;margin:0 .03em;flex:none;overflow:visible}
.mv-key{transform-box:fill-box;transform-origin:center;animation:mvKey 3.2s ease-in-out infinite}
.mv-wheel{transform-origin:25px 24px;animation:mvGira 7s cubic-bezier(.6,0,.25,1) infinite}
.mv-glint{stroke-dasharray:10 90;stroke-dashoffset:10;opacity:.85;animation:mvCorre 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes mvGira{0%,12%{transform:rotate(0)}30%,45%{transform:rotate(120deg)}63%,78%{transform:rotate(240deg)}96%,100%{transform:rotate(360deg)}}
@keyframes mvCorre{0%{stroke-dashoffset:10}60%,100%{stroke-dashoffset:-100}}
@keyframes mvKey{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.75}}
.mflogo:hover .mv-wheel{animation-duration:2.6s}
@media (prefers-reduced-motion:reduce){.mv-key,.mv-wheel,.mv-glint{animation:none}.mv-glint{opacity:0}}

/* ---------- Patrimônio reestruturado ---------- */
.pat-hero{background:radial-gradient(120% 140% at 0% 0%,rgba(212,167,44,.12),transparent 55%),var(--surface);display:flex;flex-direction:column;gap:18px}
.ph-lbl{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
.ph-val{display:block;font-size:clamp(28px,6vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--accent-2);line-height:1.15;margin:2px 0}
.ph-val.neg{color:var(--crit)}
.ph-sub{font-size:12.5px;color:var(--dim)}
.ph-eq{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.ph-chip{flex:1 1 150px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);min-width:0;transition:border-color .2s,transform .2s}
button.ph-chip{cursor:pointer}
button.ph-chip:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ph-chip i{grid-row:1 / 3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:15px;background:color-mix(in srgb,var(--c) 14%,transparent)}
.ph-chip span{font-size:11.5px;color:var(--muted)}
.ph-chip b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-chip.neg b{color:var(--crit)}
.ph-chip.res{border-color:rgba(212,167,44,.4);background:rgba(212,167,44,.07)}
.ph-chip.res b{color:var(--accent-2)}
.ph-op{align-self:center;font-size:20px;font-weight:300;color:var(--dim);width:14px;text-align:center}
.ph-comp{display:flex;flex-direction:column;gap:8px}
.ph-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;background:var(--surface-3)}
.ph-bar i{display:block;height:100%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent);animation:catbar .9s var(--ease) both}
.ph-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.ph-leg span{display:inline-flex;align-items:center;gap:6px}
.ph-leg i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.ph-leg b{color:var(--ink);font-weight:600}
@media (max-width:620px){.ph-op{display:none}.ph-chip{flex-basis:calc(50% - 4px)}}
/* reserva em meses */
.rv-top{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.rv-val{font-size:26px;font-weight:700}
.rv-cob{font-size:13px;color:var(--muted)} .rv-cob b{color:var(--ink)}
.rv-meses{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rv-m{position:relative;height:34px;border-radius:8px;background:var(--surface-3);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.rv-m i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#5BEA9C,#2EBD6B);animation:catbar .9s var(--ease) both}
.rv-m.cheio i{box-shadow:0 0 12px rgba(46,189,107,.45)}
.rv-m small{position:relative;font-size:10.5px;font-weight:600;color:var(--ink);padding-bottom:4px;opacity:.85}
.rv-info{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.rv-info b{color:var(--ink)} .rv-info small{color:var(--dim)}
/* investimentos em cards */
.inv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.itile{display:flex;flex-direction:column;gap:10px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line);cursor:pointer;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 10%,var(--surface-2)) 0%,var(--bg-2) 70%);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.itile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 12px 28px -18px var(--c)}
.itile.zero{opacity:.62}.itile.zero:hover{opacity:1}
.it-top{display:flex;align-items:center;gap:10px;min-width:0}
.it-top .logo{width:32px;height:32px;border-radius:50%}
.it-ico{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c) 30%,transparent);flex:none}
.it-n{display:flex;flex-direction:column;min-width:0;flex:1}
.it-n b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-n small{font-size:11px;color:var(--dim)}
.it-cat{font-size:10.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);padding:3px 8px;border-radius:999px;white-space:nowrap}
.it-val{font-size:20px;font-weight:700}
.it-meta{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--muted)}
.it-bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.it-bar i{display:block;height:100%;background:var(--c);border-radius:4px;animation:catbar .9s var(--ease) both}
.inew{border-style:dashed;background:transparent;align-items:center;justify-content:center;text-align:center;gap:4px;min-height:132px;--c:var(--accent)}
.inew .it-plus{font-size:22px;color:var(--accent)}
.inew b{font-size:13.5px} .inew small{font-size:11.5px;color:var(--dim)}
/* metas em tela larga */
.mtiles.wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:0}
@media (max-width:460px){.ph-chip{grid-template-columns:minmax(0,1fr);padding:9px 11px}.ph-chip i{display:none}.ph-chip b{font-size:14.5px}}

/* ---------- v47: Patrimônio mais bonito ---------- */
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ph-main{min-width:0}
.ph-donut{position:relative;width:150px;height:150px;flex:none}
.ph-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.ph-donut .rb{fill:none;stroke:rgba(255,255,255,.05);stroke-width:14}
.ph-donut .seg{fill:none;stroke:var(--c);stroke-width:14;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 55%,transparent));animation:segIn 1.1s var(--ease) both;transition:stroke-width .2s}
.ph-donut .seg:hover{stroke-width:17}
@keyframes segIn{from{stroke-dasharray:0 400}}
.ph-donut > span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ph-donut small{font-size:10.5px;color:var(--dim)}
.ph-donut b{font-size:13.5px;font-weight:700}
@media (max-width:560px){.ph-top{flex-direction:column;align-items:flex-start}.ph-donut{align-self:center}}
#invPanel .panel-h h2::before,#reservaPanel .panel-h h2::before{content:"";display:inline-block;width:4px;height:14px;border-radius:2px;background:var(--gold);margin-right:9px;vertical-align:-1px}

/* ---------- aba Metas ---------- */
.metas-hero{display:flex;align-items:center;gap:26px;background:radial-gradient(120% 150% at 0% 0%,rgba(61,255,138,.08),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(212,167,44,.1),transparent 60%),var(--surface)}
.mh-ring{position:relative;width:130px;height:130px;flex:none}
.mh-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mh-ring .rb{fill:none;stroke:rgba(255,255,255,.06);stroke-width:10}
.mh-ring .rf{fill:none;stroke:url(#none);stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dashoffset:var(--off);filter:drop-shadow(0 0 8px rgba(212,167,44,.55));animation:anelG 1.3s var(--ease) both}
@keyframes anelG{from{stroke-dashoffset:327}}
.mh-ring > span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mh-ring b{font-size:26px;font-weight:700;color:var(--accent-2)}
.mh-ring small{font-size:11px;color:var(--dim)}
.mh-txt{display:flex;flex-direction:column;min-width:0}
.mh-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mh-stats div{display:flex;flex-direction:column;padding:9px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);min-width:0}
.mh-stats b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mh-stats span{font-size:11.5px;color:var(--muted)}
@media (max-width:560px){.metas-hero{flex-direction:column;align-items:stretch;text-align:left}.mh-ring{align-self:center}}
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--line);cursor:pointer;text-align:left;
  background:radial-gradient(130% 90% at 0% 0%,color-mix(in srgb,var(--c) 12%,transparent),transparent 60%),var(--surface);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.mcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 16px 34px -20px var(--c)}
.mc-top{display:flex;align-items:center;gap:12px}
.mring.big{width:64px;height:64px}
.mring.big .rb,.mring.big .rf{stroke-width:5}
.mring.big .memo{font-size:26px}
.mc-n{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mc-n b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-st{align-self:flex-start;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.mc-p{font-size:20px;font-weight:700;color:var(--c)}
.mc-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mc-v b{font-size:22px;font-weight:700}
.mc-v span{font-size:13px;color:var(--dim)}
.mc-bar{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.mc-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,#000),var(--c));box-shadow:0 0 12px var(--c);animation:catbar 1s var(--ease) both}
.mc-f{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);min-height:30px}
.mc-f b{color:var(--ink)}
.mcard.ok .mc-f span{color:var(--good);font-weight:600}
.mcard.mnew{border-style:dashed;background:transparent;align-items:center;justify-content:center;flex-direction:row;min-height:180px;--c:var(--accent)}
#metaOkBox{display:flex;flex-direction:column;gap:var(--gap)}
#metaOkBox[hidden]{display:none}

/* ---------- card de investimentos do Início (novo formato) ---------- */
.feat-goal{font-size:12.5px;color:var(--muted);margin-top:4px}
.feat-goal b{color:var(--ink)}
.feat-gbar{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.07);margin:6px 0 22px}
.feat-gbar i{display:block;height:100%;border-radius:6px;background:var(--gold);box-shadow:0 0 14px rgba(212,167,44,.55);animation:catbar 1.1s var(--ease) both}
.feat-gbar em{position:absolute;top:14px;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;color:var(--accent-2);white-space:nowrap}
.feat-kp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feat-kp div{display:flex;flex-direction:column;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(3px)}
.feat-kp span{font-size:11px;color:var(--muted)}
.feat-kp b{font-size:14px;font-weight:700}
.fw-list{display:flex!important;flex-direction:column;gap:6px}
.fw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 128px;gap:14px;padding:0 12px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.fw-head span:last-child{text-align:right}
.fw-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 128px;align-items:center;gap:14px;padding:10px 12px;border-radius:11px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);background:rgba(10,11,13,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:border-color .2s,transform .2s,background .2s;animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.fw-row:hover{border-color:rgba(212,167,44,.45);transform:translateX(3px);background:rgba(16,17,20,.8)}
.fw-row.zero{opacity:.6}.fw-row.zero:hover{opacity:1}
.fw-id{display:flex;align-items:center;gap:10px;min-width:0}
.fw-id .logo{width:30px;height:30px;border-radius:50%;flex:none}
.fw-id > span{display:flex;flex-direction:column;min-width:0}
.fw-id b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-id small{font-size:11px;color:var(--dim)}
.fw-track{display:flex;flex-direction:column;gap:5px;min-width:0}
.fw-bar{position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:visible}
.fw-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#B98E1C,#E8C25A);box-shadow:0 0 10px rgba(212,167,44,.5);animation:catbar 1s var(--ease) both}
.fw-bar::after{content:"";position:absolute;right:-1px;top:-3px;width:2px;height:12px;border-radius:1px;background:rgba(255,255,255,.35)}
.fw-row.ok .fw-bar i{background:linear-gradient(90deg,#1F9A55,#3DFF8A);box-shadow:0 0 10px rgba(61,255,138,.45)}
.fw-lbl{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.fw-lbl b{color:var(--ink);font-weight:600}
.fw-val{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:14.5px}
.fw-val small{font-size:10.5px;font-weight:500;color:var(--dim)}
.fw-row.ok .fw-val small{color:var(--good)}
@media (max-width:640px){
  .fw-head{display:none}
  .fw-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .fw-track{grid-column:1 / -1;grid-row:2}
}
.metas-hero{flex-direction:row}
@media (max-width:560px){.metas-hero{flex-direction:column}}
.mc-n b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.mc-st{white-space:nowrap}
.mcard.mnew{min-height:130px}
.ph-donut{width:164px;height:164px}
.ph-donut b{font-size:12.5px}
.ph-donut .rb,.ph-donut .seg{stroke-width:12}

/* Início: cards de investimento iguais aos do Patrimônio, sobre o gráfico animado */
.feat-tiles{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-content:start}
.feat-tiles .itile{background:linear-gradient(155deg,color-mix(in srgb,var(--c) 14%,rgba(12,13,16,.72)) 0%,rgba(10,11,13,.7) 75%);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:rgba(255,255,255,.07)}
.feat-tiles .it-val{font-size:18px}
.feat-tiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.feat-tiles .it-cat{display:none}
.feat-tiles .it-n small::after{content:" · " attr(data-cat);color:var(--c)}
.feat-tiles .it-n small:empty::after{content:attr(data-cat)}

/* v50: Sobra em primeiro — entradas e gastos em destaque, sobra embaixo */
.kstrip .ksobra .kflow{margin-top:4px;gap:6px;padding-top:0}
.kstrip .ksobra .kflow > span{align-items:baseline;font-size:12.5px;color:var(--muted);border:0;padding:0}
.kstrip .ksobra .kflow b{font-size:16px;font-weight:700}
.kstrip .ksobra .kres{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.kstrip .ksobra .kres > span:first-child{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kstrip .ksobra .kres .val{font-size:clamp(20px,4.4vw,25px)}
/* bordas e grade: Sobra inteira no celular, depois 2 × 2 */
.kstrip .kpi{border-top:1px solid var(--line)!important;border-right:0!important}
.kstrip .ksobra{grid-column:1 / -1;border-top:0!important}
.kstrip .k-in,.kstrip .k-saldo{border-right:1px solid var(--line)!important}
.kstrip .k-prev{grid-column:auto}
@media (min-width:760px){
  .kstrip{grid-template-columns:1.35fr repeat(4,minmax(0,1fr))}
  .kstrip .kpi{border-top:0!important;border-right:1px solid var(--line)!important}
  .kstrip .ksobra{grid-column:auto}
  .kstrip .kpi:last-child{border-right:0!important}
}

/* v51: sobra compacta — entradas e gastos lado a lado, todos os blocos com a mesma altura de conteúdo */
.kstrip .ksobra .kflow{flex-direction:row;gap:0;margin-top:2px}
.kstrip .ksobra .kflow > span{flex:1;flex-direction:column;align-items:flex-start;gap:0;font-size:11px;line-height:1.25}
.kstrip .ksobra .kflow .kf-out{padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.kstrip .ksobra .kflow b{font-size:15px}
.kstrip .ksobra .kres{margin-top:4px;padding-top:6px}
.kstrip .ksobra .kres .val{font-size:clamp(18px,4.2vw,22px)}
.kstrip .kpi{justify-content:flex-start}
.kstrip .kpi .sub{margin-top:0}
.kstrip .ksobra{gap:4px}
.kstrip .ksobra .lbl{margin-bottom:2px}
.kstrip .ksobra .kres{margin-top:2px;padding-top:5px}
.kstrip .ksobra .kres .val{line-height:1.1}
.kstrip .kpi:not(.ksobra) .sub{margin-top:auto}
.kstrip .kx{font-size:11.5px;color:var(--muted);line-height:1.3;min-height:15px}
.kstrip .kx.up{color:var(--good);font-weight:600} .kstrip .kx.down{color:var(--crit);font-weight:600}
@media (max-width:520px){
  .kstrip .kpi .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .kstrip .kpi .lbl > span{overflow:hidden;text-overflow:ellipsis}
  .kstrip .kpi .sub,.kstrip .kx{font-size:11px}
  .kstrip .k-prev .sub{letter-spacing:-.01em}
}
.t-sh{display:none}
@media (max-width:520px){.t-lg{display:none}.t-sh{display:inline}}

/* aportes */
.itile{position:relative}
.iadd{position:absolute;top:10px;right:10px;z-index:2;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:var(--surface);color:var(--c);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s;cursor:pointer}
.itile:hover .iadd,.itile:focus-within .iadd{opacity:1;transform:none}
.itile:hover .it-cat{opacity:0}
@media (hover:none){.iadd{opacity:1;transform:none;position:static;align-self:flex-start;order:5}.itile:hover .it-cat{opacity:1}}
.inv-mes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv-mes div{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.inv-mes span{font-size:11.5px;color:var(--muted)} .inv-mes b{font-size:15px;font-weight:700}

/* v55 — ponte sobra → fim do mês */
.kstrip .kponte{grid-column:1 / -1;border-top:1px solid var(--line);padding:12px 16px 14px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.kstrip .kponte[hidden]{display:none}
.kponte .kp-tit{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.kponte .kp-eq{display:flex;align-items:stretch;gap:8px}
.kponte .kp-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;background:rgba(255,255,255,.02)}
.kponte .kp-b span{font-size:11.5px;color:var(--muted);line-height:1.25}
.kponte .kp-b b{font-size:16px;white-space:nowrap}
.kponte .kp-fim{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.kponte .kp-op{align-self:center;font-style:normal;font-weight:700;font-size:18px;color:var(--dim)}
.kponte .kp-txt{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.kponte .neg{color:var(--crit)} .kponte .pos{color:var(--good)}
@media (max-width:560px){.kponte .kp-eq{gap:5px}.kponte .kp-b{padding:7px 8px}.kponte .kp-b b{font-size:13.5px}.kponte .kp-b span{font-size:10.5px}.kponte .kp-op{font-size:15px}}
@media (max-width:560px){
 .kponte .kp-eq{flex-direction:column;gap:0;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
 .kponte .kp-b{flex-direction:row;justify-content:space-between;align-items:center;border:0;border-radius:0;background:transparent;padding:9px 12px}
 .kponte .kp-b + .kp-op + .kp-b{border-top:1px solid var(--line)}
 .kponte .kp-op{display:none}
 .kponte .kp-b span{font-size:12.5px} .kponte .kp-b b{font-size:15px}
 .kponte .kp-fim{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.18)!important}
 .kponte .kp-fim span::before{content:"= "} .kponte .kp-tit{font-size:11.5px}
}

/* v56 — faixa só com entradas, saídas e resultado */
.kstrip.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
.kstrip.k3 .kpi{border-top:0!important;border-right:0!important;padding:14px 16px;gap:5px}
.kstrip.k3 .k-in{border-right:1px solid var(--line)!important}
.kstrip.k3 .k-res{grid-column:1 / -1;border-top:1px solid var(--line)!important;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px}
.kstrip.k3 .k-res .lbl{flex:1 1 auto}
.kstrip.k3 .k-res .val{order:3;flex-basis:100%;display:none}
.kstrip.k3 .k-res .sub{margin:0!important}
.kstrip.k3 .val{font-size:clamp(19px,4.6vw,26px);line-height:1.15}
.kstrip.k3 .kpi .sub{margin-top:2px!important;font-size:12px}
.kstrip.k3 .k-res{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:2px}
.kstrip.k3 .k-res .lbl{grid-column:1;grid-row:1}
.kstrip.k3 .k-res .sub{grid-column:1;grid-row:2}
.kstrip.k3 .k-res .val{display:block;grid-column:2;grid-row:1 / 3;align-self:center;font-size:clamp(22px,5.4vw,30px)}
.kstrip.k3 .k-res.pos-bg{background:linear-gradient(90deg,rgba(46,189,107,.10),transparent 70%)}
.kstrip.k3 .k-res.neg-bg{background:linear-gradient(90deg,rgba(240,80,110,.12),transparent 70%)}
@media (min-width:760px){
  .kstrip.k3{grid-template-columns:1fr 1fr 1.15fr}
  .kstrip.k3 .k-out{border-right:1px solid var(--line)!important}
  .kstrip.k3 .k-res{grid-column:auto;border-top:0!important;grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start}
  .kstrip.k3 .k-res .lbl{grid-row:1}
  .kstrip.k3 .k-res .val{grid-column:1;grid-row:2;align-self:start}
  .kstrip.k3 .k-res .sub{grid-row:3}
}
.ph-chip .ph-em{grid-column:2;grid-row:3;font-size:10.5px;color:var(--dim);line-height:1.25;margin-top:1px}
.ph-chip:has(.ph-em){grid-template-rows:auto auto auto}
.ph-chip:has(.ph-em) i{grid-row:1 / 4}
.ph-chip:has(.ph-em) > span{grid-column:2;grid-row:1} .ph-chip:has(.ph-em) > b{grid-column:2;grid-row:2}
@media (max-width:460px){.ph-chip:has(.ph-em) > span,.ph-chip:has(.ph-em) > b,.ph-chip .ph-em{grid-column:1}}
.kstrip.k3 #lRes .t-sh{display:none}
@media (max-width:759px){.kstrip.k3 #lRes .t-lg{display:none}.kstrip.k3 #lRes .t-sh{display:inline}}

/* v57 — saldo no topo, barra de progresso nas faturas/investimentos, "falta" em amarelo */
.tsaldo{position:relative;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:14px;cursor:pointer;color:var(--ink);line-height:1.1;
  background:linear-gradient(135deg,rgba(212,167,44,.10),rgba(255,255,255,.02) 60%) padding-box,linear-gradient(135deg,rgba(228,185,62,.55),rgba(255,255,255,.08) 55%,rgba(228,185,62,.25)) border-box;
  border:1px solid transparent;box-shadow:0 6px 18px -10px rgba(212,167,44,.45);transition:transform .2s var(--ease),box-shadow .25s}
.tsaldo:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(212,167,44,.6)}
.tsaldo .ts-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:#1A1406;background:linear-gradient(135deg,#B8871A,#E4B93E 55%,#FFE7A3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tsaldo .ts-ic svg{width:17px;height:17px}
.tsaldo .ts-tx{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.tsaldo .ts-l{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;white-space:nowrap}
.tsaldo .ts-dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(46,189,107,.6);animation:tsPulse 2.4s ease-out infinite}
.tsaldo.velho .ts-dot{background:var(--warn);animation:none}
.tsaldo b{font-size:16px;font-weight:700;white-space:nowrap;letter-spacing:-.01em;background:linear-gradient(90deg,#FFF6D6,#E4B93E);-webkit-background-clip:text;background-clip:text;color:transparent}
.tsaldo b.neg{background:none;color:var(--crit)}
@keyframes tsPulse{0%{box-shadow:0 0 0 0 rgba(46,189,107,.55)}70%{box-shadow:0 0 0 6px rgba(46,189,107,0)}100%{box-shadow:0 0 0 0 rgba(46,189,107,0)}}
@media (max-width:640px){.tsaldo{gap:7px;padding:4px 9px 4px 4px;border-radius:12px}.tsaldo .ts-ic{width:26px;height:26px;border-radius:8px}.tsaldo .ts-ic svg{width:14px;height:14px}
  .tsaldo .ts-lt{font-size:0}.tsaldo .ts-lt::before{content:'Saldo';font-size:9.5px;letter-spacing:.05em}.tsaldo b{font-size:13px}}
@media (max-width:480px){.tsaldo .ts-ic{display:none}.tsaldo{padding:4px 10px}}
.mmain:has(.mprog){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px}
.mmain .mprog{grid-column:1 / -1}
.mprog{flex:1 0 100%;display:flex;align-items:center;gap:8px;min-width:0}
.mp-bar{flex:1;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.mp-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#B8871A,#E4B93E);transition:width .8s var(--ease)}
.mprog.ok .mp-bar i{background:var(--good)}
.mp-pct{font-size:11px;color:var(--muted);font-weight:600;min-width:30px;text-align:right}
.mp-falta{font-size:11.5px;font-weight:600;color:var(--warn);white-space:nowrap}
.mprog.ok .mp-falta{color:var(--good)}
.st.falta{color:var(--warn)}.st.falta::before{background:var(--warn)}
.kfalta{color:var(--warn);font-weight:600}

/* v58 — patrimônio bruto + líquido */
.ph-liq{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);max-width:440px}
.ph-val2{display:block;font-size:clamp(20px,4.2vw,26px);font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.2;margin:1px 0}
.ph-val2.neg{color:var(--crit)}

/* v59 — cotação e lucro dos investimentos */
.field[hidden]{display:none!important}
.it-vrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-width:0}
.it-lucro{display:inline-flex;align-items:baseline;gap:4px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.it-lucro small{font-size:10.5px;font-weight:600;opacity:.85}
.it-lucro.up{color:var(--good);background:var(--good-soft);box-shadow:inset 0 0 0 1px rgba(46,189,107,.25)}
.it-lucro.down{color:var(--crit);background:var(--crit-soft);box-shadow:inset 0 0 0 1px rgba(240,80,110,.25)}
.it-live{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:-3px;font-variant-numeric:tabular-nums}
.it-live b{color:var(--ink);font-weight:700;letter-spacing:.02em}
.it-live em{font-style:normal;color:var(--dim)}
.it-live em.up{color:var(--good);font-weight:600}.it-live em.down{color:var(--crit);font-weight:600}
.feat-lucro{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:4px 0 2px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.feat-lucro small{font-size:12px;font-weight:600}
.feat-lucro i{font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
.feat-lucro.up{color:var(--good)}.feat-lucro.down{color:var(--crit)}

/* v63 — barra de menu do celular em uma linha (6 abas) */
.tabbar{grid-template-columns:repeat(6,minmax(0,1fr));left:8px;right:8px;padding:5px;gap:2px}
.tabbar .nav-btn{min-width:0;padding:7px 0;font-size:10px;gap:3px;letter-spacing:-.01em}
.tabbar .nav-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabbar .nav-btn svg{width:20px;height:20px;flex:none}
@media (max-width:350px){.tabbar .nav-btn{font-size:9px}.tabbar .nav-btn svg{width:18px;height:18px}}

/* v64 — barra de meta sempre visível */
.it-bar.sem{background:repeating-linear-gradient(90deg,var(--surface-3) 0 6px,transparent 6px 10px)}
.it-defmeta{font-weight:600;color:var(--accent-2)}

/* v65 — aporte com detalhes */
.ap-det{align-self:flex-start;margin:-4px 0 4px;color:var(--accent-2)!important;border-style:dashed!important}
.ap-det[hidden]{display:none!important}

/* v67 — tag renda fixa / variável */
.it-grp{display:inline-block;margin-top:4px;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap;width:max-content}
.it-grp.rf{color:#5FD3FF;background:rgba(95,211,255,.12);box-shadow:inset 0 0 0 1px rgba(95,211,255,.28)}
.it-grp.rv{color:#C792FF;background:rgba(199,146,255,.12);box-shadow:inset 0 0 0 1px rgba(199,146,255,.28)}
.it-grp:not(.rf):not(.rv){color:var(--muted);background:var(--surface-3)}
.it-grp.big{font-size:10.5px;padding:3px 9px;margin:0 0 6px}
.inv-hd{display:flex;flex-direction:column;align-items:flex-start}
.inv-hd .hint{margin:0}
.it-n{display:flex;flex-direction:column;min-width:0}

/* v68 — investimentos da tela inicial em páginas de 2 fileiras */
.feat-pg{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:12px;padding-top:2px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.feat-pg small{color:var(--dim)}
.feat-pg .pg-b{width:34px;height:28px;border-radius:9px;border:1px solid rgba(228,185,62,.45);background:rgba(212,167,44,.10);color:var(--accent-2);font-size:12px;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .15s}
.feat-pg .pg-b:hover:not(:disabled){background:rgba(212,167,44,.22);transform:translateY(-1px)}
.feat-pg .pg-b:disabled{opacity:.3;cursor:default}
.feat-tiles .itile.pg-in{animation:pgIn .35s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.feat-tiles.com-pg{position:relative;padding-bottom:40px}
.feat-tiles.com-pg .feat-pg{position:absolute;left:0;right:0;bottom:0}

/* v69 — metas por categoria */
.it-bar.dupla{position:relative}
.it-bar.dupla i{position:absolute;left:0;top:0;bottom:0}
.it-bar.dupla i.outros{opacity:.35}
.mcat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mcat{display:flex;flex-direction:column;gap:7px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(155deg,color-mix(in srgb,var(--c) 10%,var(--bg-2)),var(--bg-2) 70%);cursor:pointer;color:var(--ink);transition:border-color .2s,transform .2s}
.mcat:hover{border-color:var(--line-2);transform:translateY(-1px)}
.mcat.ok{border-color:rgba(46,189,107,.4)}
.mc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mc-h b{font-size:14px}.mc-h .it-grp{margin:0}.mc-h small{margin-left:auto;font-size:11px;color:var(--dim)}
.mc-v{display:flex;align-items:baseline;gap:6px}.mc-v b{font-size:18px}.mc-v span{font-size:12px;color:var(--muted)}
.mc-f{font-size:11.5px;color:var(--muted)}.mcat.ok .mc-f{color:var(--good);font-weight:600}
.inv-meta-ln{color:var(--accent-2);font-weight:600}

/* v70 — moeda girando ao lado do total investido */
.feat-bigrow{display:flex;align-items:center;gap:12px}
.coin{--s:34px;width:var(--s);height:var(--s);flex:none;perspective:300px;filter:drop-shadow(0 0 10px rgba(228,185,62,.45))}
.coin-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;animation:coinSpin 3.2s linear infinite}
.coin-f{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font:800 calc(var(--s)*.5)/1 Inter,system-ui,sans-serif;color:#7A5410;text-shadow:0 1px 0 rgba(255,240,190,.7);
  background:radial-gradient(circle at 32% 28%,#FFF4C2 0 12%,#F2CC5B 30%,#D4A72C 62%,#A9790F 100%);
  box-shadow:inset 0 0 0 2px #B98A17,inset 0 0 0 4px rgba(255,236,170,.55),inset -3px -4px 6px rgba(120,80,0,.35)}
.coin-b{transform:rotateY(180deg)}
.coin-in::before{content:"";position:absolute;inset:0;border-radius:50%;background:#9C6E0C;transform:translateZ(-1.5px)}
@keyframes coinSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.coin-in{animation:none}}
@media (max-width:560px){.coin{--s:28px}}
.feat-l{container-type:inline-size}
.feat-bigrow{gap:10px;min-width:0}
.feat-bigrow .feat-big{min-width:0;white-space:nowrap;font-size:min(36px,10.2cqw)}
.feat-bigrow .coin{--s:min(32px,10cqw)}
/* v71 — moeda: "$" nos dois lados */
.coin-f{transform:translateZ(1.6px)}
.coin-b{transform:rotateY(180deg) translateZ(1.6px)}
.coin-in::before{transform:none;background:linear-gradient(90deg,#8A600A,#C8961E,#8A600A)}
.feat-bigrow .coin{--s:min(24px,7.5cqw)}.feat-bigrow{gap:8px}
.coin-vault{width:72%;height:72%;color:#7A5410;filter:drop-shadow(0 1px 0 rgba(255,240,190,.6))}
.vela-leg .vl-f{background:#5A5E68!important;box-shadow:none!important}

/* v77 — cartões na tela inicial: largura toda, cartões à esquerda e fatura à direita */
.hc-wrap{margin-bottom:var(--gap,16px)}
.hc-split{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:22px;align-items:start}
#hcBody .hc-split .hc-cards{grid-template-columns:1fr;gap:14px}
#hcBody .hc-split .pcard{max-width:290px}
.hc-split .hc-det{margin-top:0;border-top:0;padding-top:0;padding-left:22px;border-left:1px solid var(--line);min-height:100%}
@media (max-width:720px){.hc-split{grid-template-columns:1fr;gap:14px}#hcBody .hc-split .hc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-split .hc-det{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px}}
@media (max-width:420px){#hcBody .hc-split .hc-cards{grid-template-columns:1fr;justify-items:center}}
.hc-split{grid-template-columns:minmax(200px,240px) minmax(0,1fr)}
#hcBody .hc-split .pcard{max-width:240px;padding:11px 13px}
#hcBody .hc-split .pc-mid b{font-size:15px}
@media (max-width:720px){#hcBody .hc-split .pcard{max-width:none}}
/* v78 — cartões da tela inicial com respiro nas bordas */
.hc-split{grid-template-columns:minmax(220px,268px) minmax(0,1fr)}
#hcBody .hc-split .csel{padding:4px}
#hcBody .hc-split .pcard{max-width:260px;padding:15px 17px;gap:6px}
#hcBody .hc-split .pc-top b{font-size:13.5px}
#hcBody .hc-split .pc-top .logo{width:26px;height:26px}
#hcBody .hc-split .pc-chip{width:30px;height:22px}
#hcBody .hc-split .pc-mid small{font-size:9.5px;letter-spacing:.06em}
#hcBody .hc-split .pc-mid b{font-size:15px}
#hcBody .hc-split .pc-debt b{font-size:12px!important}
#hcBody .hc-split .pc-bot{font-size:10.5px}
#hcBody .hc-split .pc-bot .st{font-size:10px;padding:2px 7px}
#hcBody .hc-split .pc-num{font-size:11px}
@media (max-width:720px){#hcBody .hc-split .pcard{max-width:320px}}
#hcBody .hc-split .csel{padding:7px}

/* v79 — flash sutil a cada 5s: verde nas entradas, vermelho nas despesas */
.panel.flash{position:relative;overflow:hidden;isolation:isolate}
.panel.flash::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,var(--fl) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;
  animation:flashPass 5s ease-in-out infinite}
.panel.flash>*{position:relative;z-index:1}
.flash-in{--fl:rgba(46,189,107,.10);--flb:rgba(46,189,107,.35)}
.flash-out{--fl:rgba(240,80,110,.10);--flb:rgba(240,80,110,.35);}
.flash-out::after{animation-delay:2.5s}
.panel.flash{animation:flashBorda 5s ease-in-out infinite}
.flash-out{animation-delay:2.5s}
@keyframes flashPass{0%{background-position:120% 0}24%{background-position:-20% 0}100%{background-position:-20% 0}}
@keyframes flashBorda{0%,24%,100%{box-shadow:var(--shadow)}10%{box-shadow:var(--shadow),inset 0 0 0 1px var(--flb),0 0 22px -10px var(--flb)}}
@media (prefers-reduced-motion:reduce){.panel.flash,.panel.flash::after{animation:none}}
/* v80 — flash intercalado: verde → 2s → vermelho → 2s → verde… */
.panel.flash::after{animation:flashPass2 6.4s ease-in-out infinite}
.panel.flash{animation:flashBorda2 6.4s ease-in-out infinite}
.flash-out::after,.flash-out{animation-delay:3.2s}
@keyframes flashPass2{0%{background-position:120% 0}18.75%,100%{background-position:-20% 0}}
@keyframes flashBorda2{0%,18.75%,100%{box-shadow:var(--shadow)}8%{box-shadow:var(--shadow),inset 0 0 0 1px var(--flb),0 0 22px -10px var(--flb)}}
@media (prefers-reduced-motion:reduce){.panel.flash,.panel.flash::after{animation:none}}
/* v81 — despesas a pagar em vermelho */
.mval b.out{color:var(--out)}
/* v83 — garante o atraso do flash vermelho */
.panel.flash.flash-out,.panel.flash.flash-out::after{animation-delay:3.2s}
/* v84 — cartões da tela inicial no celular (empilhado, sem estourar a largura) */
@media (max-width:720px){
  .hc-split{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  #hcBody .hc-split .hc-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #hcBody .hc-split .csel{padding:5px}
  #hcBody .hc-split .pcard{max-width:none;width:100%;padding:12px 13px}
  .hc-split .hc-det{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px;min-width:0}
  .hc-det .hc-h{gap:8px}.hc-det .hc-h>span{min-width:0}
}
@media (max-width:560px){
  #hcBody .hc-split .hc-cards{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  #hcBody .hc-split .pcard{max-width:340px;margin:0 auto;padding:14px 16px}
  #hcBody .hc-split .pc-top b{font-size:14px}#hcBody .hc-split .pc-mid b{font-size:17px}#hcBody .hc-split .pc-debt b{font-size:13px!important}
}