/* Conceito: celular escuro em grafite com amarelo girassol como único destaque. O cartão de crédito é o centro da aba Cartões: vira, desliza e guarda a senha atrás de uma confirmação. */
:root{
  --silver:#D6D6D6; --sun1:#FFEE32; --sun2:#FFD100; --ink-dark:#202020; --graphite:#333533;
  --bg:#202020; --card:#333533; --line:#484a47; --text:#D6D6D6; --mute:#9b9d99; --on-sun:#202020;
  --bezel:#0d0d0d; --bad:#ff8a78;
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.15;color:#fff}
.hint{font-size:13px;color:var(--mute);text-align:center}
.screen{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.notch{height:26px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:11px;font-weight:700}
.notch i{width:64px;height:16px;border-radius:9px;background:var(--bezel)}
.view{flex:1;overflow-y:auto;padding:6px 16px 92px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--sun2);color:var(--on-sun);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.top small{display:block;color:var(--mute);font-size:11px}
.top b{font-family:var(--display);font-size:16px;color:#fff}
.bell{width:36px;height:36px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--silver);font-size:15px}
/* hero */
.hero{background:linear-gradient(135deg,var(--sun1),var(--sun2));color:var(--on-sun);border-radius:22px;padding:16px}
.hero small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.hero .big{font-family:var(--display);font-size:32px;font-weight:700;margin:2px 0 10px;font-variant-numeric:tabular-nums}
.split{display:flex;height:8px;border-radius:5px;overflow:hidden;background:rgba(32,32,32,.18)}
.split i{display:block;height:100%}
.legend{display:flex;gap:12px;font-size:11px;font-weight:700;margin-top:8px;flex-wrap:wrap}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick button{background:var(--card);border:0;border-radius:16px;padding:12px 0 9px;color:var(--text);font:700 11px var(--body);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.quick button b{width:34px;height:34px;border-radius:12px;background:var(--bg);color:var(--sun1);display:grid;place-items:center;font-size:18px;font-weight:700}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border-radius:16px;padding:12px;min-width:0}
.tile small{color:var(--mute);font-size:11px;font-weight:600;display:block}
.tile b{font-size:16px;font-variant-numeric:tabular-nums;font-family:var(--display);color:#fff;display:block;overflow-wrap:anywhere}
.up{color:var(--sun1)!important}
.sec{font-size:13px;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;color:#fff}
.sec span{font-weight:700;color:var(--sun1);font-size:12px}
.list{display:flex;flex-direction:column;background:var(--card);border-radius:16px}
.row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);min-width:0}
.row:last-child{border-bottom:0}
.ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--bg);color:var(--sun1)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{color:var(--mute);font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .v{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.row .v.pos{color:var(--sun1)}
.pill{font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;background:var(--sun2);color:var(--on-sun)}
.check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--mute);background:none;cursor:pointer;display:grid;place-items:center;color:transparent;font-size:13px;font-weight:800;padding:0}
.check.on{background:var(--sun2);border-color:var(--sun2);color:var(--on-sun)}
/* carrossel de cartões */
.car{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;margin:0 -16px;cursor:grab}
.track{display:flex;transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.slide{flex:none;width:100%;padding:4px 16px 8px;perspective:1100px}
.flip{position:relative;width:100%;aspect-ratio:1.586;transition:transform .6s cubic-bezier(.3,.8,.3,1);transform-style:preserve-3d}
.flip.on{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:20px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 28px -12px #000;overflow:hidden}
.back{transform:rotateY(180deg)}
.cv-sun{background:linear-gradient(135deg,var(--sun1),var(--sun2));color:var(--on-sun)}
.cv-grf{background:linear-gradient(135deg,#3f423f,#202020);color:var(--silver);box-shadow:0 14px 28px -12px #000,inset 0 0 0 1px #555855}
.cv-sil{background:linear-gradient(135deg,#ececec,var(--silver));color:var(--on-sun)}
.r1{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px}
.r1 span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.chipc{width:38px;height:28px;border-radius:7px;background:var(--chip,linear-gradient(135deg,#f6e27a,#c9a100));border:1px solid rgba(0,0,0,.25)}
.mini{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--sun1),var(--sun2));color:var(--on-sun);border-radius:14px;padding:8px 14px;box-shadow:0 8px 16px -10px #000;flex:none}
.mini span{font-size:11px;font-weight:800;line-height:1.25}
.mini b{font-family:var(--display);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini.falta{background:var(--bad)}
.sheet .mini{position:static;box-shadow:none}
.dotsrow{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.cbtn,.cbtn-gap{width:28px;height:28px;flex:none}
.cbtn{border-radius:50%;border:2px solid var(--bg);cursor:pointer;padding:0;background:conic-gradient(#ef6b6b,#FFD100,#17a58e,#4b8df8,#8d5fd0,#ef6b6b);box-shadow:0 0 0 2px var(--line)}
.cbtn[aria-expanded="true"]{box-shadow:0 0 0 2px var(--sun1)}
.sw{display:flex;flex-wrap:wrap;gap:10px}
.sw button,.swc{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;flex:none}
.sw button.on,.swc.on{border-color:#fff;box-shadow:0 0 0 2px var(--card) inset}
.swc{background:conic-gradient(#ef6b6b,#FFD100,#17a58e,#4b8df8,#8d5fd0,#ef6b6b);display:grid;place-items:center;overflow:hidden}
.swc input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:44px;height:44px}
.swc span{color:#202020;font-weight:800;font-size:16px;pointer-events:none;background:#fff9;border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center}
.cv-grf .chipc{background:linear-gradient(135deg,var(--sun1),var(--sun2))}
.num{font-family:var(--display);font-size:16px;letter-spacing:.1em;font-weight:600;font-variant-numeric:tabular-nums}
.r3{display:flex;justify-content:space-between;gap:10px}
.r3 small{display:block;font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.r3 b{font-size:12px}
.stripe{height:34px;background:rgba(0,0,0,.85);margin:6px -16px 0}
.cv-grf .stripe{background:#000}
.binfo{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:11px}
.binfo small{display:block;font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.binfo b{font-size:12px}
.flipmsg{font-size:9px;text-align:center;opacity:.65;font-weight:700}
.add{border:2px dashed var(--mute);background:none;color:var(--silver);align-items:center;justify-content:center;gap:6px;text-align:center;box-shadow:none}
.add b{width:44px;height:44px;border-radius:50%;background:var(--sun2);color:var(--on-sun);display:grid;place-items:center;font-size:26px;font-weight:500}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:all .25s}
.dots i.on{width:20px;background:var(--sun1)}
.bar{height:6px;border-radius:4px;background:var(--bg);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--sun2)}
.bar i.hot{background:var(--bad)}
.sbox{background:var(--card);border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px}
.sbox .pin{font-family:var(--display);font-size:20px;letter-spacing:.2em;color:#fff;flex:1}
.btn2{border:1px solid var(--line);background:var(--bg);color:var(--sun1);font:700 12px var(--body);padding:8px 12px;border-radius:10px;cursor:pointer}
.go{border:0;background:var(--sun2);color:var(--on-sun);font:800 14px var(--body);padding:13px;border-radius:14px;cursor:pointer;width:100%}
.go.ghost{background:var(--bg);color:var(--sun1);border:1px solid var(--line)}
/* nav */
.nav{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:22px 22px 0 0;display:grid;grid-template-columns:1fr 1fr 64px 1fr 1fr;align-items:end;padding:6px 6px 12px}
.nav button{background:none;border:0;color:var(--mute);font:700 10px var(--body);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 0}
.nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:var(--sun1)}
.nav .plus{width:52px;height:52px;border-radius:50%;background:var(--sun2);color:var(--on-sun);margin:-24px auto 0;box-shadow:0 8px 20px -6px var(--sun2);font-size:28px;font-weight:500;line-height:1;display:grid;place-items:center;padding:0}
button:focus-visible,.field:focus-visible,select:focus-visible{outline:2px solid var(--sun1);outline-offset:2px}
/* folhas */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-radius:24px 24px 0 0;padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px;transform:translateY(105%);transition:transform .25s ease;max-height:93%;overflow-y:auto;scrollbar-width:none}
.sheet.on{transform:none}
.grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto;flex:none}
.sheet h3{font-size:16px}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--bg);border-radius:12px;padding:3px}
.seg button{border:0;background:none;padding:8px 0;border-radius:9px;font:700 12px var(--body);color:var(--mute);cursor:pointer}
.seg button.on{background:var(--sun2);color:var(--on-sun)}
.money{display:flex;align-items:baseline;gap:6px;justify-content:center;font-family:var(--display)}
.money span{font-size:18px;color:var(--mute)}
.money input{width:7ch;border:0;background:none;font:700 38px var(--display);color:#fff;text-align:center;padding:0;min-width:0}
.money input:focus{outline:none}
.lab{font-size:11px;font-weight:700;color:var(--mute);margin-bottom:5px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--text);padding:6px 11px;border-radius:20px;font:600 12px var(--body);cursor:pointer}
.chip.on{background:var(--sun2);border-color:var(--sun2);color:var(--on-sun)}
.field{width:100%;border:1px solid var(--line);background:var(--bg);color:#fff;padding:10px 12px;border-radius:11px;font:500 13px var(--body)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:absolute;left:16px;right:16px;top:34px;z-index:9;background:var(--sun1);color:var(--on-sun);padding:10px 14px;border-radius:12px;font-size:12px;font-weight:800;transform:translateY(-90px);transition:transform .25s}
.toast.on{transform:none}
.modal{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.mbox{background:var(--card);border-radius:22px;padding:18px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center}
.mbox p{font-size:12px;color:var(--mute)}
.mbox .err{color:var(--bad);font-weight:700;min-height:16px}
.reveal{font-family:var(--display);font-size:34px;letter-spacing:.3em;color:var(--sun1);padding-left:.3em}
/* lateral */
svg text{fill:var(--mute);font-family:var(--body);font-size:9px}
@media(prefers-reduced-motion:reduce){.sheet,.scrim,.toast,.track,.flip{transition:none}}

/* ---- tela cheia: o app ocupa a janela do celular; no computador vira uma coluna centralizada ---- */
#app{position:relative;max-width:520px;height:100dvh;margin:0 auto;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media(min-width:560px){#app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.notch{display:none}
.view{padding-top:max(14px,env(safe-area-inset-top,0px));padding-left:16px;padding-right:16px}
.nav{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.sheet{padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
.field,select.field{font-size:16px}
.money input{font-size:38px}
.login{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 28px}
.login .logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--sun1),var(--sun2));display:grid;place-items:center;color:var(--on-sun);font:700 24px var(--display)}
.login h1{font-size:26px;margin:0}
.login p{color:var(--mute);font-size:14px;margin:0}
.login .err{color:var(--bad);font-size:13px;font-weight:700;min-height:18px}
.vazio{color:var(--mute);font-size:13px;text-align:center;padding:22px 12px}
.row.tap{cursor:pointer}
.row.tap:active{background:var(--bg)}
.quem{color:var(--mute)}
.load{display:grid;place-items:center;flex:1;color:var(--mute);font-size:13px}
.neg{color:var(--bad)!important}
.btn-danger{background:none;border:1px solid var(--bad);color:var(--bad);font:800 14px var(--body);padding:12px;border-radius:14px;cursor:pointer;width:100%}
.monthrow button{background:none;border:0;color:var(--sun1);font-size:22px;line-height:1;padding:0 6px;cursor:pointer}
.monthrow{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:12px;padding:6px 8px;font-weight:700;font-size:14px;color:#fff}
.view>*{flex-shrink:0}
.instalar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.instalar img{border-radius:11px;flex:none}
.instalar div{flex:1;min-width:0}
.instalar b{display:block;color:#fff;font-size:14px}
.instalar small{display:block;color:var(--mute);font-size:12px;line-height:1.3}
.instalar .go{width:auto;padding:10px 16px;font-size:13px;flex:none}
.passos{text-align:left;display:flex;flex-direction:column;gap:10px;margin:4px 0}
.passos div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}
.passos i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;background:var(--sun2);color:var(--on-sun);display:grid;place-items:center;font-weight:800;font-size:12px}