@font-face{font-family:'VT323';src:url(fonts/vt323.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';src:url(fonts/permanent-marker.woff2) format('woff2')}
:root{--wood:#6b4a2b;--paper:#f6efdc;--ink:#222;--ink2:#5a4a30;--rule:#7a6a4a;--red:#9b1c1c;--green:#15703a;--muted:#7a6a4a}
*{box-sizing:border-box}
html{background:var(--wood);overflow-x:hidden}
/* clip, não hidden: hidden num eixo força o outro a `auto`, e o body virava um
   scroller à parte — a ficha voando pra dentro punha uma segunda barra na tela.
   O hidden fica de reserva pra quem não conhece clip (Safari < 16). */
body{margin:0;min-height:100vh;overflow-x:hidden;overflow-x:clip;max-width:100vw;color:var(--ink);font:20px/1.35 'VT323',ui-monospace,monospace;padding:18px 12px 120px;
  background:var(--wood) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="%236b4a2b"/><path d="M0 0h200v200H0z" fill="none" stroke="%235a3d22" stroke-width="2" stroke-dasharray="1 7"/></svg>')}
.paper{position:relative;background:var(--paper);margin:0 auto;max-width:460px;padding:22px 18px 30px;box-shadow:0 14px 30px rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px)}
.paper:before,.paper:after{content:"";position:absolute;left:0;right:0;height:14px;background:linear-gradient(135deg,transparent 7px,var(--paper) 7px) 0 0/14px 14px,linear-gradient(-135deg,transparent 7px,var(--paper) 7px) 7px 0/14px 14px;background-repeat:repeat-x}
.paper:before{top:-13px}.paper:after{bottom:-13px;transform:scaleY(-1)}
/* a diva é jogada no recibo: o ponto de queda e o voo mudam a cada vez.
   O JS mede o código de barras e escolhe um lugar que não cobre o "sincronizado". */
.stain{position:absolute;width:70px;height:70px;box-sizing:border-box;padding:7px;border-radius:50%;--f1:#9a5b00;--f2:#fff8e6;background:repeating-conic-gradient(var(--f2) 0 12.86deg,transparent 0 25.71deg),var(--f1);--dx:0px;--dy:0px;--rot:-16deg;--vx:70px;--vy:-90px;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot));filter:drop-shadow(2px 4px 4px rgba(0,0,0,.35));pointer-events:none;z-index:1;
  opacity:0}
/* a cor conta como você está: vermelho quem deve, verde quem tem a receber, rosa quem
   está quite, e o âmbar de sempre pra quem ainda não disse quem é */
.stain.deve{--f1:var(--red);--f2:#fbe3df}
.stain.recebe{--f1:var(--green);--f2:#dff0e4}
.stain.quite{--f1:#d94f8a;--f2:#ffe3ef}
.stain.voou{animation:jogada .85s linear both}
.stain.voou.cambalhota{animation:cambalhota 1.05s linear both}
.stain.voou.requica{animation:requica 1.3s linear both}
/* ficha de pôquer: cai acelerando, bate, quica duas vezes cada vez mais baixo
   e assenta. A cambalhota gira mais e ainda roda um tico depois de pousar. */
/* ficha de pôquer: entra já em movimento, quica duas vezes cada vez mais baixo
   e assenta. Nada de amassar: acrílico não deforma. */
@keyframes jogada{
  0%{opacity:0;transform:translate(calc(var(--dx) + var(--vx)),calc(var(--dy) + var(--vy))) rotate(calc(var(--rot) + 160deg));animation-timing-function:cubic-bezier(.25,.35,.7,1)}
  25%{opacity:1}
  45%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 7deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  60%{transform:translate(var(--dx),calc(var(--dy) - 12px)) rotate(calc(var(--rot) - 4deg));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  75%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 2deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  86%{transform:translate(var(--dx),calc(var(--dy) - 4px)) rotate(var(--rot));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  100%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
@keyframes cambalhota{
  0%{opacity:0;transform:translate(calc(var(--dx) + var(--vx)),calc(var(--dy) + var(--vy))) rotate(calc(var(--rot) + 700deg));animation-timing-function:cubic-bezier(.25,.35,.7,1)}
  22%{opacity:1}
  46%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 30deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  62%{transform:translate(var(--dx),calc(var(--dy) - 16px)) rotate(calc(var(--rot) - 18deg));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  77%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 8deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  88%{transform:translate(var(--dx),calc(var(--dy) - 5px)) rotate(calc(var(--rot) - 3deg));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  100%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
/* teimosa: cai mais alto e quica três vezes antes de assentar. Sorteada de vez em quando. */
@keyframes requica{
  0%{opacity:0;transform:translate(calc(var(--dx) + var(--vx)),calc(var(--dy) + var(--vy))) rotate(calc(var(--rot) + 200deg));animation-timing-function:cubic-bezier(.25,.35,.7,1)}
  18%{opacity:1}
  32%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 12deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  46%{transform:translate(var(--dx),calc(var(--dy) - 21px)) rotate(calc(var(--rot) - 9deg));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  60%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 6deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  72%{transform:translate(var(--dx),calc(var(--dy) - 10px)) rotate(calc(var(--rot) - 4deg));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  83%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 2deg));animation-timing-function:cubic-bezier(.15,.7,.4,1)}
  92%{transform:translate(var(--dx),calc(var(--dy) - 3px)) rotate(var(--rot));animation-timing-function:cubic-bezier(.6,.1,.85,.5)}
  100%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.stain{opacity:1}.stain.voou{animation:none}}
/* a ficha pousada é pegável: dois toques ela treme, no terceiro descola do papel e
   segue o dedo por cima da tela; solta com força, voa pra fora */
.stain.pousou{animation:none;opacity:1;pointer-events:auto;cursor:default;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-drag:none}
.stain.pousou.treme{animation:treme .32s ease-out}
@keyframes treme{0%,100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
  30%{transform:translate(var(--dx),calc(var(--dy) - 5px)) rotate(calc(var(--rot) - 9deg))}
  65%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) + 5deg))}}
body.pegavel .stain.pousou{cursor:grab}
/* largada devagar: volta pro papel e fica no lugar em que parou, rolando junto com a nota */
.stain.largada{z-index:5;transition:transform .15s}
.stain.solta{position:fixed;z-index:60;touch-action:none;transform:rotate(var(--rot)) scale(var(--esc,1));transition:transform .15s,filter .15s}
.stain.solta.segura{--esc:1.18;cursor:grabbing;transition:transform .15s,filter .15s;filter:drop-shadow(6px 14px 10px rgba(0,0,0,.4))}
.stain.solta.voando{transition:none}
.stain.fora{display:none}
/* modo chato (easter egg): a diva apaga, desbota e some; o subtítulo vai junto */
.stain.apaga{animation:apaga .7s ease-in forwards;pointer-events:none}
@keyframes apaga{to{opacity:0;filter:grayscale(1) brightness(1.4);transform:rotate(var(--rot)) scale(.6)}}
body.chato .stain,body.chato #tagline{display:none}
#signoff{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
h1{font-family:'VT323',monospace;font-size:40px;margin:0;text-align:center;letter-spacing:2px;text-transform:uppercase;font-weight:400;line-height:1}
h2{font-family:'VT323',monospace;font-size:22px;letter-spacing:3px;text-align:center;margin:14px 0 8px;font-weight:400;text-transform:uppercase}
h2.longo{font-size:20px;letter-spacing:1px;white-space:nowrap}
.c{text-align:center;font-size:17px;line-height:1.5;text-transform:uppercase}
.hr{border-top:2px dashed var(--rule);margin:12px 0}
.row{display:flex;align-items:baseline;line-height:1.7;position:relative;font-size:21px}
.row .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.row .d{flex:1;border-bottom:2px dotted var(--rule);margin:0 6px 5px;min-width:14px}
.row .v{white-space:nowrap} .num{display:inline-block;min-width:7ch;text-align:right} .cur{display:inline-block;margin-right:5px}
.small{font-size:16px;color:var(--ink2);margin:-4px 0 4px;display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.small>span{flex:1}
.stamp{--cy:0px;display:inline-block;margin-left:9px;vertical-align:middle;font-family:'Permanent Marker',cursive;color:var(--red);border:1.5px solid currentColor;border-radius:44% 56% 47% 53%/58% 46% 54% 42%;padding:2px 11px;font-size:11px;line-height:1.5;transform:translateY(calc(var(--cy) + var(--dy,0))) rotate(var(--rot,-8deg));opacity:.9;letter-spacing:.5px;pointer-events:none}
@keyframes risca{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.row.paid.novo:after{animation:none}}
.paid .l,.paid .v{color:#8a7a5a} .row.paid:after{content:"";position:absolute;left:0;right:auto;width:100%;top:50%;border-top:2px solid var(--ri,#8a7a5a);pointer-events:none;z-index:2}
.row.paid.novo:after{animation:risca .55s ease-out both;animation-delay:var(--rd,0ms)}
.nm{font-weight:400}
.neg{color:var(--red)}.pos{color:var(--green)}
/* o ▸ dos itens é o botão que abre e fecha a lista */
#itemsHead .l{display:flex;align-items:center;gap:9px}
#itemsCaret{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border:2px solid var(--ink);border-radius:4px;background:#fff8e6;box-shadow:2px 2px 0 var(--ink);font-size:15px;line-height:1}
#itemsCaret span{display:block;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
#itemsCaret.aberto span{transform:rotate(90deg)}
#itemsHead:active #itemsCaret{transform:translate(2px,2px);box-shadow:none}
/* quando a seção chega na tela a linha inteira vira botão por um instante: o ▸
   cresce vazado, a linha afunda uma vez (e o ▸ volta preto), e a moldura some.
   É a linha toda que abre, não só a caixinha. A moldura é um :before com folga,
   pra não mexer no layout nem encostar no texto */
#itemsHead{isolation:isolate}
#itemsHead:before{content:"";position:absolute;inset:-3px -7px;border:2px solid var(--ink);border-radius:5px;background:#fff8e6;box-shadow:3px 3px 0 var(--ink);z-index:-1;opacity:0;pointer-events:none}
#itemsHead.pisca{animation:apertinho 1.6s ease-in-out var(--ad,0ms) backwards}
#itemsHead.pisca:before{animation:moldura 1.6s ease-in-out var(--ad,0ms) backwards}
#itemsHead.pisca #itemsCaret span{animation:vazado 1.6s ease-in-out var(--ad,0ms) backwards}
@keyframes apertinho{0%,44%,66%,100%{transform:none}54%{transform:translate(3px,3px)}}
@keyframes moldura{
  0%{opacity:0;box-shadow:3px 3px 0 var(--ink)}
  18%,44%{opacity:1;box-shadow:3px 3px 0 var(--ink)}
  54%{opacity:1;box-shadow:0 0 0 var(--ink)}
  66%,76%{opacity:1;box-shadow:3px 3px 0 var(--ink)}
  100%{opacity:0;box-shadow:3px 3px 0 var(--ink)}}
/* vazado e grande enquanto espera o toque; preto quando a linha afunda */
@keyframes vazado{
  0%,100%{transform:none;color:var(--ink);-webkit-text-stroke:0 var(--ink)}
  18%,44%{transform:scale(1.5);color:transparent;-webkit-text-stroke:1.2px var(--ink)}
  54%{transform:none;color:var(--ink);-webkit-text-stroke:0 var(--ink)}}
/* quem já aprendeu (abriu a lista uma vez, ou já veio muitas vezes) ganha só um
   toquinho de leve na caixinha do ▸ */
#itemsHead.suave #itemsCaret{animation:toquinho .62s ease-in-out var(--ad,0ms) backwards}
@keyframes toquinho{
  0%,46%,100%{transform:none;box-shadow:2px 2px 0 var(--ink)}
  22%{transform:translate(2px,2px) scale(.94);box-shadow:0 0 0 var(--ink)}
  72%{transform:translate(1px,1px) scale(.975);box-shadow:1px 1px 0 var(--ink)}}
@keyframes abreLista{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#itemsBody:not(.hidden){animation:abreLista .22s ease-out}
@media (prefers-reduced-motion:reduce){#itemsCaret span,#itemsHead.pisca,#itemsHead.pisca:before,#itemsHead.pisca #itemsCaret span,#itemsHead.suave #itemsCaret,#itemsBody:not(.hidden){transition:none;animation:none}}
.row.total{font-size:24px;margin-top:10px} .row.total .v{font-size:24px}
.bars{margin:18px auto 0;height:40px;width:230px} .bars svg{display:block;width:100%;height:100%}
.empty{color:var(--muted);font-size:17px;text-align:center;padding:4px 0}
/* caderno em branco: a caixa tracejada diz por onde começar */
/* caderno em branco: a caixa tracejada diz por onde começar */
.empty.vazio{border:2px dashed var(--rule);border-radius:4px;background:#fff8e6;box-shadow:3px 3px 0 rgba(0,0,0,.08);padding:12px 14px;margin:6px 0;font-size:18px;line-height:1.5;color:var(--ink2)}
.empty.vazio b{font-weight:400;color:var(--ink)}
/* conta fechada: o contorno e o recado em verde, a mesma cor de quem recebe */
.empty.vazio.quite{border-color:var(--green)} .empty.vazio.quite b{color:var(--green)}
button,input,select{font:inherit;color:var(--ink)}
button{background:#fff8e6;border:2px solid var(--ink);border-radius:4px;padding:5px 12px;cursor:pointer;text-transform:uppercase;font-size:17px;letter-spacing:.5px}
.share2{display:flex;flex-direction:column;align-items:center}
button.big{font-size:22px;padding:10px 16px;box-shadow:4px 4px 0 var(--ink);width:100%;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.wa,button.big svg{flex:none;position:relative;top:-1px}
/* o zap é a segunda bolinha flutuante, vizinha do anotar */
#waBtn.wafab{right:88px;bottom:22px;width:58px;height:58px;border-radius:50%;transform:rotate(5deg);color:var(--ink);transition:right .4s cubic-bezier(.2,.9,.25,1)}
#waBtn.wafab .wa-lbl{display:flex;align-items:center;justify-content:center}
#waBtn.wafab .wa{width:27px;height:27px;top:0}
/* sem ninguém escolhido não existe o ✎: o zap ocupa a vaga da ponta.
   Quando a pessoa entra, ele escorrega pra dentro e abre espaço pro lápis. */
#waBtn.wafab.so{right:18px}
@media (prefers-reduced-motion:reduce){#waBtn.wafab{transition:none}}
/* balãozinho do primeiro gasto: aponta pro ✎ enquanto o evento não tem nada anotado */
#dica{position:fixed;z-index:9;right:14px;bottom:92px;max-width:196px;text-align:center;background:#9a5b00;color:#fff;
  border:2px solid var(--ink);border-radius:5px;padding:7px 11px;line-height:1.2;font-size:19px;text-transform:uppercase;letter-spacing:.5px;box-shadow:2px 2px 0 var(--ink)}
#dica:after{content:"";position:absolute;right:38px;bottom:-9px;border:9px solid transparent;border-top-color:var(--ink);border-bottom:0}
@keyframes entraDica{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes cutucaDica{0%,72%,100%{transform:translateY(0)}80%{transform:translateY(5px)}88%{transform:translateY(1px)}}
#dica{animation:entraDica .35s ease-out both,cutucaDica 1.8s ease-in-out .35s infinite}
/* enquanto o balão chama, o ✎ fica preenchido pra ficar claro pra onde ele aponta */
#fab.chamando{background:#9a5b00;color:#fff;border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){#dica{animation:none}}
#whoNewBox button{background:#9a5b00;color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
button.small{padding:0 8px;font-size:16px;display:inline-flex;align-items:center;gap:6px;line-height:1.6}
button.small svg{display:block}
button.danger{border-color:transparent;background:transparent;color:var(--red);padding:2px 6px}
button.ghost{border-color:transparent;background:transparent;text-decoration:underline;padding:2px 4px}
a.link{color:var(--ink2);cursor:pointer;text-decoration:underline}
#splitHint a.link{color:inherit}   /* 'igualmente' na mesma cor do resto da frase */
/* "quem é você?" é o que falta fazer: marca-texto amarelo com borda de tinta, e um balancinho de me-aperte */
a.link.amb{color:var(--ink);background:#ffd23f;text-decoration:none;border:2px solid var(--ink);border-radius:4px;box-shadow:2px 2px 0 var(--ink);padding:1px 8px;font-size:16px;text-transform:uppercase;display:inline-block}
a.link.amb:active{transform:translate(2px,2px);box-shadow:none}
@keyframes chama{0%,58%,100%{transform:rotate(0) scale(1)}64%{transform:rotate(-6deg) scale(1.1)}70%{transform:rotate(5deg) scale(1.1)}76%{transform:rotate(-4deg) scale(1.06)}82%{transform:rotate(3deg) scale(1.03)}88%{transform:rotate(-1.5deg) scale(1)}}
a.link.amb{animation:chama 1.8s ease-in-out infinite;transform-origin:50% 60%}
@media (prefers-reduced-motion:reduce){a.link.amb{animation:none}}
#addPerson{text-decoration:none;padding:2px 8px 2px 0;margin-right:-8px;white-space:nowrap}
button:disabled{opacity:.45;cursor:default;box-shadow:none}
/* no desktop não há dedo: o mouse por cima preenche o botão com a cor dele mesmo */
@media (hover:hover) and (pointer:fine){
  button{transition:background .12s ease,color .12s ease}
  button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
  /* o ✔ e o cadastrar chave param com a piscada montada (`both`); só o !important
     passa na frente dela, e cancelar a animação faria a piscada rodar de novo na saída */
  button.ico.ok:hover:not(:disabled){background:var(--green) !important;color:var(--paper) !important}
  button.ico.amb:hover:not(:disabled),#whoNewBox button:hover:not(:disabled){background:#9a5b00 !important;color:#fff !important}
  button.ico.okl:hover:not(:disabled){background:#5aa46a;color:#fff}
  button.danger:hover:not(:disabled){background:var(--red);color:var(--paper)}
  button.ghost:hover:not(:disabled){background:transparent;color:var(--ink)}
  #fab:not(.chamando):hover{background:var(--ink);color:var(--paper)}
}
input,select{background:transparent;border:0;border-bottom:2px solid var(--ink);padding:8px 4px;border-radius:0;width:100%}
input::placeholder{color:#9a8a6a;text-transform:uppercase}
form{display:grid;gap:10px}
.two{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:end}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);padding:2px 10px;font-size:17px;cursor:pointer;user-select:none;text-transform:uppercase;background:transparent}
.chip input{width:auto;margin:0;accent-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper)}
.muted{color:var(--muted);font-size:17px}
.status{font-size:15px;color:var(--muted);text-transform:uppercase;text-align:center;margin-top:6px}
.status:empty{display:none}
.status.err{color:var(--red)}
.hidden{display:none !important}
.fab{position:fixed;right:18px;bottom:22px;z-index:8;width:58px;height:58px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--ink);font-size:28px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg)}
#overlay,#sheet{position:fixed;inset:0;background:rgba(40,25,10,.7);display:flex;padding:16px;z-index:10;overflow:auto}
#overlay .paper{max-width:420px;width:100%;padding:24px 20px;margin:auto}
#sheet .paper{max-width:420px;width:100%;padding:24px 20px;margin:auto}
code.box{display:block;padding:8px;border:1px dashed var(--rule);word-break:break-all;font-size:16px;user-select:all}
#mineRows .row.pos .v{color:var(--green)} #mineRows .row.neg .v{color:var(--red)} #mineRows .row.ok .l,#mineRows .row.ok .v{color:var(--green)} #mineRows .row.ok .d{border-color:var(--green)} 
#mineRows .row.sub{font-size:17px;color:var(--ink2);line-height:1.5} #mineRows .row.sub .v{font-size:17px}
#mineRows .row.sub .l{white-space:normal;overflow:visible;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:72%} #mineRows .row.sub .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.acts{display:inline-flex;gap:8px;align-items:center;min-height:26px} .spin{width:14px;height:14px;border:2px dotted var(--ink2);border-radius:50%;animation:spin 1.1s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} button.ico{padding:0 6px;height:26px;display:inline-flex;align-items:center;gap:4px;font-size:16px;line-height:1;letter-spacing:0;color:var(--ink)} button.ico svg{display:block} button.ico.ok{color:var(--green);border-color:var(--green)} #mineRows button.ico.ok{height:26px;padding:0 9px;font-size:17px;box-shadow:2px 2px 0 var(--green)} button.ico.amb{color:#9a5b00;border-color:#9a5b00;height:22px;font-size:14px;padding:0 6px;gap:3px} button.ico.amb svg{width:13px;height:13px} button.ico.okl{color:#5aa46a;border-color:#5aa46a;height:20px;font-size:13px;padding:0 5px;gap:3px} button.ico.okl svg{width:11px;height:11px}
/* o copiar pix sai de trás do ✔ quando a chave chega, em vez de aparecer seco */
#mineRows .dupla{position:relative;display:inline-flex;align-items:center;gap:2px;margin-left:2px}
#mineRows .dupla>.ok{position:relative;z-index:2}
#mineRows .dupla>.brota{position:relative;z-index:1;min-width:0;animation:brota .42s cubic-bezier(.2,.9,.3,1.15) both}
/* o lugar do botão abre enquanto ele sai: antes ele já ocupava a largura, parado */
@keyframes brota{
  0%{opacity:0;max-width:0;overflow:hidden;transform:translateX(calc(-100% - 6px)) scale(.6)}
  30%{opacity:1}
  100%{opacity:1;max-width:60px;overflow:hidden;transform:none}}
/* assim que o copiar pix termina de sair, o ✔ vazado se enche de verde duas vezes: "me pague" */
#mineRows .dupla>.ok.pisca{animation:pisca .9s ease-in-out both}
@keyframes pisca{
  0%,100%{background:#fff8e6;color:var(--green);transform:none}
  45%{background:var(--green);color:#fff8e6;transform:scale(1.14)}}
/* o cadastrar chave pix desce de debaixo do "minha conta" e pisca uma vez */
#pixLine #pixBtn{animation:desceEPisca 1.25s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes desceEPisca{
  0%{opacity:0;transform:translateY(-140%) scale(.82);background:#fff8e6;color:#9a5b00}
  22%{opacity:1}
  38%,78%,100%{opacity:1;transform:none;background:#fff8e6;color:#9a5b00}
  58%{opacity:1;transform:scale(1.12);background:#9a5b00;color:#fff8e6}}
@media (prefers-reduced-motion:reduce){#mineRows .dupla>.brota{animation:none;opacity:1}#mineRows .dupla>.ok.pisca,#pixLine #pixBtn{animation:none}}
/* a linha nasce sem altura: o espaço abre junto com o botão descendo, não antes dele */
#pixLine{max-height:0;overflow:hidden;margin:0;transition:max-height .42s cubic-bezier(.2,.9,.3,1),margin .42s cubic-bezier(.2,.9,.3,1),opacity .3s ease}
#pixLine.cheio{max-height:46px;margin:-2px 0 10px}
#pixLine .acts{transition:transform .35s ease}
#pixLine.gone{max-height:0;margin:0;opacity:0} #pixLine.gone .acts{transform:translateY(-14px) scale(.4)}
.link.dim{opacity:.5;font-size:13px} .link.dim svg{width:12px;height:12px} .link.go{color:var(--green);font-size:17px}
#mineRows .row.sub .v{display:inline-flex;align-items:center;gap:0}
#mineRows .row.hdr{font-size:15px;color:var(--ink2);line-height:1.4;margin-top:6px} #mineRows .row.hdr .v{font-size:15px;text-transform:uppercase} #mineRows .row.hdr .d{visibility:hidden}
/* linha de quem eu devo: circulada à caneta, com a volta dupla de quem rabisca duas vezes */
/* as duas voltas ficam em pseudo-elementos pra poderem ser desenhadas sem mexer no número */
/* a volta é maior que a linha: sem folga ela encostava na de cima e na de baixo,
   e a barriga da direita ia parar em cima da borda do papel */
#settle .row.mine{margin:5px 0}
.row.mine .v{position:relative;z-index:3;padding:2px 7px;margin:0 -5px;cursor:pointer}   /* acima do risco da linha vizinha */
.row.mine .v:after{content:"";position:absolute;inset:-2px;border:2.5px solid var(--mk,#7a6a4a);border-radius:40% 60% 45% 55%/60% 45% 55% 40%;pointer-events:none}
.row.mine .v:before{content:"";position:absolute;inset:-5px -4px -4px -5px;border:2px solid var(--mk,#7a6a4a);border-radius:55% 45% 60% 40%/45% 60% 40% 55%;opacity:.8;transform:rotate(1.5deg);pointer-events:none}
/* a caneta dá a volta: o conic esconde o que ainda não foi riscado, em passos curtos */
.row.mine.risca .v:after{animation:volta .18s steps(1) both;animation-delay:var(--rd2,0ms)}
.row.mine.risca .v:before{animation:volta .18s steps(1) both;animation-delay:calc(var(--rd2,0ms) + .18s)}
@keyframes volta{
  0%{-webkit-mask-image:conic-gradient(#000 0deg,transparent 0);mask-image:conic-gradient(#000 0deg,transparent 0)}
  12%{-webkit-mask-image:conic-gradient(#000 52deg,transparent 0);mask-image:conic-gradient(#000 52deg,transparent 0)}
  25%{-webkit-mask-image:conic-gradient(#000 103deg,transparent 0);mask-image:conic-gradient(#000 103deg,transparent 0)}
  37%{-webkit-mask-image:conic-gradient(#000 150deg,transparent 0);mask-image:conic-gradient(#000 150deg,transparent 0)}
  50%{-webkit-mask-image:conic-gradient(#000 196deg,transparent 0);mask-image:conic-gradient(#000 196deg,transparent 0)}
  62%{-webkit-mask-image:conic-gradient(#000 240deg,transparent 0);mask-image:conic-gradient(#000 240deg,transparent 0)}
  75%{-webkit-mask-image:conic-gradient(#000 285deg,transparent 0);mask-image:conic-gradient(#000 285deg,transparent 0)}
  87%{-webkit-mask-image:conic-gradient(#000 330deg,transparent 0);mask-image:conic-gradient(#000 330deg,transparent 0)}
  100%{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){.row.mine.risca .v:before,.row.mine.risca .v:after{animation:none}}
.pixi{display:inline-flex;gap:3px;align-items:center;vertical-align:-2px} .pixi svg{display:block}
.item .by,.item .who{display:none}
.item:hover .by,.item.open .by,.item:hover .who,.item.open .who{display:inline}
.item{cursor:default}
.tag{display:inline-block;border:1px solid var(--ink);padding:0 5px;font-size:13px;line-height:1.4;margin-right:6px;vertical-align:2px;text-transform:uppercase}
.day{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;text-align:center;margin:10px 0 2px}
#amount{font-size:30px;letter-spacing:1px}
.shares{display:grid;gap:6px}
.shares .row{font-size:18px;line-height:1.4;align-items:center}
.shares input{width:110px;text-align:right;padding:4px}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;font-size:17px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;text-transform:uppercase}
.toast.show{opacity:1}
@media (min-width:900px) and (min-height:600px){html{zoom:1.5}}
#boot{display:none;margin:14px 0 2px} #boot .spin{width:22px;height:22px;border-width:3px}
#app.loading>*:not(h1):not(#boot){display:none} #app.loading #boot{display:block} #app.loading.nospin{display:none} #app.loading~.fab{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#app:not(.loading)>*:not(.stain){animation:fadein .35s ease both}
.confete{position:fixed;z-index:30;pointer-events:none}
.confete i{position:absolute;display:block;width:8px;height:13px;margin:-6px 0 0 -4px;border-radius:1px;animation:confete 1s var(--del,0ms) cubic-bezier(.12,.72,.35,1) both}
@keyframes confete{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 190px)) rotate(var(--rot)) scale(1)}}
button.ico.ok:active{transform:translate(2px,2px);box-shadow:none}
@media (prefers-reduced-motion:reduce){.confete{display:none}}
.undo{margin-left:7px;font-size:15px;color:var(--ink2);text-decoration:none;opacity:.7;position:relative;z-index:3}
.row.paid .l{display:flex;align-items:center;overflow:visible;min-width:0}
.row.paid .l .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* o carimbo não ocupa espaço na linha: os pontinhos correm por baixo como se ele não estivesse lá */
.row.paid .stampbox{position:relative;width:0;flex:none;align-self:center;z-index:4}
.row.paid .stampbox .stamp{--cy:-50%;position:absolute;left:8px;top:50%;margin-left:0}
/* o R$ fica numa coluna só dele e os valores terminam alinhados na direita.
   Minha conta mistura corpos de texto, então lá a coluna é em px; no Falta pagar, em ch */
#mineRows .cur{width:22px;margin-right:0} #mineRows .num{min-width:52px}
#settle .cur{width:auto;margin-right:0} #settle .num{min-width:7ch}
#splitHint{margin-bottom:-6px}