/* Extrato — graphite content layer with raised, bevelled cards; Liquid Glass only on floating controls.
   One accent (green) = what was left over. Red only when money ran short, always with stripes and a label. */
:root{
  --bg:#0B0C0E; --card:#17191D; --card2:#202328; --fill:rgba(255,255,255,.07);
  --fg:#F4F5F7; --fg2:#A7ACB6; --fg3:#8A909B; --sep:rgba(255,255,255,.08);
  --out:#8A909B; --accent:#5BE3A3; --neg:#FF7A70; --on-accent:#04130C; --azul:#5AA9FF;
  --rim:rgba(255,255,255,.10); --rim-lo:rgba(255,255,255,.02); --shadow:rgba(0,0,0,.55); --glow:rgba(91,227,163,.09);
  --glass:rgba(30,32,37,.62); --glass-hi:rgba(255,255,255,.28); --glass-edge:rgba(255,255,255,.14);
  --f-d:"SF Pro Rounded",ui-rounded,-apple-system,"SF Pro Display",system-ui,sans-serif;
  --f-b:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root{
  --bg:#EEF0F3; --card:#FFFFFF; --card2:#F3F4F6; --fill:rgba(12,13,16,.05);
  --fg:#0C0D10; --fg2:#555B66; --fg3:#6B717C; --sep:rgba(12,13,16,.08);
  --out:#8A909B; --accent:#0A7C52; --neg:#C42B2B; --on-accent:#FFFFFF; --azul:#1D6FD1;
  --rim:rgba(255,255,255,1); --rim-lo:rgba(12,13,16,.06); --shadow:rgba(30,40,70,.16); --glow:rgba(10,124,82,.07);
  --glass:rgba(255,255,255,.66); --glass-hi:rgba(255,255,255,.95); --glass-edge:rgba(255,255,255,.7);
  color-scheme:light}}
@media (prefers-contrast: more){:root{--fg2:var(--fg);--out:#6B717C}}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--fg);font:17px/1.35 var(--f-b);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
.app{position:relative;height:100%;max-width:520px;margin:0 auto;overflow:hidden;overflow:clip;isolation:isolate;
  background:radial-gradient(90% 30% at 50% 0%,var(--glow),transparent 70%),var(--bg)}
@media (min-width:560px){.app{box-shadow:0 0 0 1px var(--sep)}}
.edge-top{position:absolute;top:0;left:0;right:0;height:calc(var(--sat) + 52px);z-index:9;pointer-events:none;background:linear-gradient(var(--bg) 40%,transparent)}
.screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;scrollbar-width:none;
  padding:calc(var(--sat) + 8px) 0 calc(var(--sab) + 180px)}
.screen::-webkit-scrollbar{display:none}
.screen.on{display:block}
.screen.anim{animation:enter .35s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* surfaces */
.card{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,#fff 8%),var(--card) 40%);border-radius:26px;
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--rim-lo),0 1px 2px var(--shadow),0 14px 30px -16px var(--shadow)}
.glass{position:relative;background:var(--glass);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 30px -8px var(--shadow),0 1px 3px var(--shadow)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--glass-hi),var(--glass-edge) 30%,transparent 55%,var(--glass-edge));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-reduced-transparency: reduce){.glass{background:var(--card2);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast: more){.glass,.card{outline:1px solid var(--fg2)}}
/* controls */
.toolbar{position:absolute;top:calc(var(--sat) + 10px);right:16px;z-index:12;display:flex;gap:10px}
.gbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--fg);cursor:pointer;border:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.gbtn:active{transform:scale(.92)}
/* O span do ícone herdava a altura da linha de texto e deixava o desenho acima do centro. */
.gbtn > [data-icon]{display:grid;place-items:center;line-height:0}
.gbtn > [data-icon] > svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tabbar{position:absolute;left:16px;right:16px;bottom:calc(var(--sab) + 10px);height:66px;border-radius:33px;display:flex;align-items:center;padding:4px;z-index:12}
.lens{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/5);border-radius:29px;background:var(--fill);
  box-shadow:inset 0 1px 0 var(--glass-hi);transition:transform .5s cubic-bezier(.45,1.45,.45,1)}
.tab{flex:1;height:58px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font:600 11px var(--f-b);color:var(--fg);opacity:.8;cursor:pointer;border:0;background:none;min-width:0;letter-spacing:-.1px}
.tab .icon{width:23px;height:23px}
.tab[aria-selected="true"]{color:var(--accent);opacity:1}
.month{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 88px);height:48px;border-radius:24px;display:flex;align-items:center;padding:0 2px;z-index:11;white-space:nowrap}
.month[hidden]{display:none}
.month button{width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.month button:disabled{opacity:.3;cursor:default}
.month .t{min-width:150px;text-align:center;font:600 16px var(--f-b)}
/* type */
.large{font:700 34px/1.1 var(--f-d);letter-spacing:-.6px;padding:44px 20px 16px}
.large small{display:block;font:600 15px var(--f-b);letter-spacing:0;color:var(--fg2);margin-bottom:2px}
.sec-h{font:600 15px var(--f-b);padding:28px 22px 10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec-h span{font-weight:500;font-size:13px;color:var(--fg2)}
.sec-h.day{font-size:13px;font-weight:500;color:var(--fg2)}
.sec-f{font-size:13px;color:var(--fg2);padding:10px 22px 0;line-height:1.45}
.wrap{margin:0 16px}
.num{font-variant-numeric:tabular-nums}
.hero{margin:0 16px;padding:20px 18px 16px}
.hero .k{font:600 15px var(--f-b);color:var(--fg2)}
.hero .v{font:700 40px/1.1 var(--f-d);letter-spacing:-1.2px;margin:4px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .v.neg{color:var(--neg)}
.hero p{font-size:15px;line-height:1.4;color:var(--fg2)}
.hero p b{color:var(--fg);font-weight:600}
.chart{margin:14px -4px 2px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.info{display:flex;gap:8px;font-size:13px;color:var(--fg2);margin-top:14px;line-height:1.4;padding:10px 12px;border-radius:14px;background:var(--fill)}
.info .icon{width:16px;height:16px;margin-top:1px}
.chip{display:flex;align-items:center;gap:6px;margin:12px 22px 0;font:500 13px var(--f-b);color:var(--fg2)}
.chip .icon{width:15px;height:15px;stroke-width:2.6}
.grow{transform-box:fill-box;transform-origin:50% 100%}
.grow.down{transform-origin:50% 0%}
.anim .grow{animation:rise .7s cubic-bezier(.2,.9,.25,1) both}
.anim .grow.d1{animation-delay:.12s}.anim .grow.d2{animation-delay:.24s}
@keyframes rise{from{transform:scaleY(0)}}
/* rows */
.list{overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:12px 16px;position:relative;min-height:60px;width:100%;border:0;background:none;text-align:left;cursor:pointer}
.row.static{cursor:default}
.row+.row::before{content:"";position:absolute;top:0;right:16px;left:68px;border-top:1px solid var(--sep)}
.row.ind0+.row::before,.row.ind0::before{left:16px}
button.row:active{background:var(--fill)}
.ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card2) 85%,#fff 15%),var(--card2));
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--rim-lo),0 2px 6px -2px var(--shadow)}
.ic .icon{width:19px;height:19px}
.main{flex:1;min-width:0}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.line .num,.amt{font-weight:600;white-space:nowrap}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:15px;color:var(--fg2);margin-top:2px}
.barline{display:flex;align-items:center;gap:10px;margin-top:8px}
.bar{flex:1;height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:var(--out)}
.row.top .bar>i{background:var(--fg)}
.pct{font-size:13px;color:var(--fg2);min-width:36px;text-align:right}
.chev{color:var(--fg3)}.chev .icon{width:16px;height:16px;stroke-width:2.6}
.link{color:var(--accent);font-weight:600}
.amt.in{color:var(--accent)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px}
.tile{padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tile .tv{font:700 21px var(--f-d);letter-spacing:-.4px;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ts{font-size:13px;color:var(--fg2);line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.sel{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.sel .m{font:600 15px var(--f-b);color:var(--fg2)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--fg2);margin-top:6px}
.legend span{display:flex;align-items:center;gap:6px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;position:relative;min-height:52px}
.kv+.kv::before{content:"";position:absolute;top:0;right:16px;left:16px;border-top:1px solid var(--sep)}
.kv .r{font-weight:600}
.search{margin:0 16px 12px;border-radius:14px;height:44px;padding:0 14px;background:var(--fill);color:var(--fg2);display:flex;align-items:center;gap:8px}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--fg);outline:none}
.search .icon{width:18px;height:18px}
.seg{position:relative;display:flex;margin:0 16px 4px;border-radius:12px;padding:3px;height:40px;background:var(--fill)}
.seg .sl{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:9px;background:var(--card2);
  box-shadow:inset 0 1px 0 var(--rim),0 2px 6px -1px var(--shadow);transition:transform .35s cubic-bezier(.3,1.2,.4,1)}
.seg button{flex:1;position:relative;z-index:1;border:0;background:none;font:600 14px var(--f-b);color:var(--fg2);cursor:pointer}
.seg button[aria-pressed="true"]{color:var(--fg)}
.filterchip{display:flex;align-items:center;gap:10px;margin:0 16px 4px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--fill);font-size:15px}
.filterchip b{flex:1;font-weight:600}
.filterchip button{border:0;background:var(--card2);border-radius:10px;padding:6px 12px;font-weight:600;font-size:14px;cursor:pointer}
.doc{width:38px;height:46px;border-radius:9px;flex:none;position:relative;display:grid;place-items:end center;padding-bottom:6px;
  font:700 10px var(--f-b);letter-spacing:.6px;color:var(--fg2);background:linear-gradient(180deg,color-mix(in srgb,var(--card2) 85%,#fff 15%),var(--card2));
  box-shadow:inset 0 1px 0 var(--rim),0 4px 10px -4px var(--shadow)}
.ok{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font:600 13px var(--f-b);margin-top:4px}
.ok.warn{color:var(--fg2)}
.ok .icon{width:14px;height:14px;stroke-width:2.8}
.danger{color:var(--neg);font-weight:600}
/* empty */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22vh 32px 0}
.empty .ic{width:72px;height:72px;border-radius:22px}.empty .ic .icon{width:34px;height:34px}
.empty h2{font:700 22px var(--f-d)}
.empty p{color:var(--fg2);font-size:15px;line-height:1.45;max-width:320px}
.btn{border:0;border-radius:14px;min-height:50px;padding:0 22px;font-weight:600;cursor:pointer}
.btn.prim{color:var(--on-accent);background:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px var(--shadow)}
.btn.sec{background:var(--fill);color:var(--fg)}
.btn.wide{width:100%}
/* sheet + dialog */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}
.sheet{position:absolute;left:8px;right:8px;bottom:calc(var(--sab) + 8px);top:calc(var(--sat) + 40px);border-radius:38px;transform:translateY(110%);
  transition:transform .45s cubic-bezier(.3,1.15,.4,1);overflow-y:auto;z-index:31;scrollbar-width:none;padding-bottom:24px}
.sheet::-webkit-scrollbar{display:none}
.app.open .dim{opacity:1;pointer-events:auto}.app.open .sheet{transform:none}
.grab{width:36px;height:5px;border-radius:3px;background:var(--fg3);opacity:.6;margin:8px auto 0}
.sheetbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 4px;gap:8px}
.sheetbar b{font:600 17px var(--f-b);text-align:center;flex:1}
.gbtn.pill{width:auto;padding:0 18px;border-radius:22px;font-weight:500}
.gbtn.prim{font-weight:600;color:var(--on-accent);background:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px var(--shadow)}
.txhead{text-align:center;padding:10px 16px 6px}
.txhead .v{font:700 38px var(--f-d);letter-spacing:-1px;margin:4px 0 2px}
.check{color:var(--accent)}
.toggle{width:51px;height:31px;border-radius:16px;position:relative;flex:none;border:0;cursor:pointer;background:var(--accent);transition:background .25s}
.toggle::after{content:"";position:absolute;top:2px;left:22px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:left .35s cubic-bezier(.4,1.5,.45,1)}
.toggle[aria-checked="false"]{background:var(--fill);box-shadow:inset 0 0 0 1px var(--sep)}.toggle[aria-checked="false"]::after{left:2px}
.dialog{position:absolute;left:24px;right:24px;top:50%;transform:translate(0,-50%) scale(.96);opacity:0;pointer-events:none;z-index:41;border-radius:28px;padding:22px 18px 16px;transition:.25s}
.dialog.on{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.dialog h3{font:600 17px var(--f-b);text-align:center}
.dialog p{font-size:14px;color:var(--fg2);text-align:center;margin:6px 0 14px;line-height:1.4}
.dialog input{width:100%;height:46px;border-radius:12px;border:1px solid var(--sep);background:var(--fill);color:var(--fg);font:inherit;padding:0 12px;margin-bottom:14px}
.dialog .acts{display:flex;gap:10px}.dialog .acts .btn{flex:1}
.dimtop{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.dimtop.on{opacity:1;pointer-events:auto}
.busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;padding:18px 22px;border-radius:20px;display:flex;align-items:center;gap:12px;font-weight:600}
.busy[hidden]{display:none}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--fill);border-top-color:var(--fg);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:absolute;left:50%;bottom:calc(var(--sab) + 150px);transform:translate(-50%,10px);opacity:0;z-index:45;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Resumo do mês: uma barra de proporção (o todo é o que entrou; gasto + sobra). */
.split{margin:18px 0 2px}
.split-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--fg2);margin-bottom:8px}
.split-top b{font:600 15px var(--f-d);color:var(--fg)}
.split-bar{display:flex;gap:3px;height:40px}
.split-bar i{position:relative;display:flex;align-items:center;justify-content:center;min-width:6px;flex-basis:0;border-radius:12px;font-style:normal;transform-origin:0 50%}
.split-bar span{font:600 14px var(--f-d)}
.split-bar .s-out{background:var(--out);color:#fff}
.split-bar .s-left{background:var(--accent);color:var(--on-accent)}
.split-bar .s-azul{background:var(--azul);color:#fff}
.split-bar .s-short{background:repeating-linear-gradient(45deg,var(--neg) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 1.5px var(--neg);color:var(--neg)}
.split-bar .s-short span{background:var(--card);padding:1px 6px;border-radius:8px}
.anim .split-bar i{animation:growx .7s cubic-bezier(.2,.9,.25,1) both}
.anim .split-bar i+i{animation-delay:.12s}
@keyframes growx{from{transform:scaleX(0)}}
.split-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin-top:14px}
.split-legend .lg{display:flex;gap:9px;align-items:flex-start}
.split-legend .dot{flex:none;width:10px;height:10px;border-radius:3px;margin-top:4px}
.split-legend .dot.out{background:var(--out)}
.split-legend .dot.left{background:var(--accent)}
.split-legend .dot.azul{background:var(--azul)}
.split-legend .dot.short{background:repeating-linear-gradient(45deg,var(--neg) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--neg)}
.split-legend .ln{font-size:13px;color:var(--fg2)}
.split-legend .lv{font:600 16px var(--f-d);margin-top:1px;white-space:nowrap;letter-spacing:-.2px}
.split-legend .lv small{display:block;font:500 12px var(--f-b);color:var(--fg2);margin-top:1px}
.split-legend .lg:has(.left) .lv{color:var(--accent)}
.split-legend .lg:has(.short) .lv{color:var(--neg)}
.split-legend .lg:has(.azul) .lv{color:var(--azul)}
@media (prefers-reduced-motion: reduce){.anim .split-bar i{animation:none}}

/* Editar lançamento */
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;min-height:52px;position:relative}
.field+.field::before{content:"";position:absolute;top:0;right:16px;left:16px;border-top:1px solid var(--sep)}
.field>span{color:var(--fg2);font-size:15px;flex:none}
.field input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--fg);font:inherit;text-align:right;padding:6px 0}
.field input[type=date]{-webkit-appearance:none;appearance:none;min-height:34px;display:flex;justify-content:flex-end}
.field input:focus{color:var(--accent)}
.field .link{border:0;background:none;color:var(--accent);font:600 15px var(--f-b);cursor:pointer;padding:6px 0}
.seg.mini{margin:0;height:34px;width:170px;flex:none;border-radius:10px}
.seg.mini button{border-radius:8px;font-size:13px}
.seg.mini button[aria-pressed="true"]{background:var(--card2);color:var(--fg);box-shadow:0 1px 3px var(--shadow)}