:root{--ink:#0e3b43;--ink2:#165560;--sun:#f2b134;--bg:#f3f6f4;--card:#fff;--tx:#10292e;--mut:#5c7479;--in:#1f8a63;--inbg:#e2f4ec;--out:#c8423f;--outbg:#fbe7e6;--ln:#d8e2df;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#0a1f23;--card:#112d33;--tx:#e8f1ef;--mut:#93aeb3;--ln:#23474f;--inbg:#12382c;--outbg:#3a1b1c;color-scheme:dark}}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:16px/1.45 "Trebuchet MS",system-ui,sans-serif;background:var(--bg);color:var(--tx);padding-top:env(safe-area-inset-top,0)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.wrap{max-width:520px;margin:0 auto;padding:16px 16px calc(88px + env(safe-area-inset-bottom,0))}
.auth{min-height:100%;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin:0 auto;padding:24px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink)}
@media(prefers-color-scheme:dark){.brand{color:#fff}}
.logo{width:40px;height:40px;border-radius:12px;background:var(--ink);display:grid;place-items:center;color:var(--sun);font-weight:900}
h1{font-size:26px;line-height:1.15;margin:22px 0 6px}
h2{font-size:18px;margin-bottom:10px}
p.s{color:var(--mut);font-size:14px}
label{display:block;font-size:13px;font-weight:700;margin:12px 0 4px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1.5px solid var(--ln);background:var(--card)}
.btn{display:block;width:100%;padding:13px;border-radius:12px;font-weight:800;background:var(--ink);color:#fff;margin-top:14px;text-align:center;text-decoration:none}
.btn.sun{background:var(--sun);color:#2b1d00}.btn.wa{background:#1faa59}.btn.ghost{background:transparent;color:var(--tx);border:1.5px solid var(--ln)}
.btn.sm{display:inline-block;width:auto;padding:7px 11px;font-size:13px;margin:0}
.card{background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:16px;margin-top:12px}
.err{background:var(--outbg);color:var(--out);padding:10px 12px;border-radius:10px;margin-top:12px;font-size:14px}
.ok{background:var(--inbg);color:var(--in);padding:10px 12px;border-radius:10px;margin-top:12px;font-size:14px}
.link{background:none;color:var(--ink2);text-decoration:underline;padding:8px;width:100%;margin-top:6px;font-weight:700}
@media(prefers-color-scheme:dark){.link{color:var(--sun)}}
.big{font-size:30px;font-weight:900;letter-spacing:-.5px}
.row{display:flex;gap:10px}.row>*{flex:1}
.hero{background:var(--ink);color:#fff;border-radius:20px;padding:20px;margin-top:12px}
.hero small{opacity:.75}
.hero .big{color:var(--sun)}
.bar{height:10px;border-radius:9px;background:var(--ln);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--sun)}
.pill{font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;display:inline-block}
.p-ativo{background:var(--inbg);color:var(--in)}.p-pendente{background:#fff2d1;color:#8a5a00}.p-bloqueado,.p-vencido{background:var(--outbg);color:var(--out)}
.tx{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--ln)}
.tx:last-child{border:0}
.in{color:var(--in)}.out{color:var(--out)}
.chart{display:flex;align-items:flex-end;gap:26px;height:110px;justify-content:center;margin-top:10px}
.chart div{width:46px;border-radius:8px 8px 0 0;min-height:4px}
nav.tabs{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--ln);display:flex;padding-bottom:env(safe-area-inset-bottom,0);z-index:5}
nav.tabs button{flex:1;padding:12px 4px;background:none;font-size:12px;font-weight:700;color:var(--mut)}
nav.tabs button.on{color:var(--ink2);box-shadow:inset 0 3px var(--sun)}
@media(prefers-color-scheme:dark){nav.tabs button.on{color:var(--sun)}}
.top{display:flex;justify-content:space-between;align-items:center}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:9}
.modal>div{background:var(--card);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px;max-height:92%;overflow:auto}
.seg{display:flex;gap:8px}.seg button{flex:1;padding:11px;border-radius:10px;border:1.5px solid var(--ln);background:none;font-weight:800}
.seg .e.on{background:var(--inbg);border-color:var(--in);color:var(--in)}.seg .s.on{background:var(--outbg);border-color:var(--out);color:var(--out)}
code.pix{display:block;word-break:break-all;background:var(--bg);padding:10px;border-radius:10px;font-size:12px;margin-top:6px}
.tbl{overflow-x:auto}
.u{padding:12px 0;border-bottom:1px solid var(--ln)}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media(prefers-reduced-motion:no-preference){.modal>div{animation:up .2s ease-out}@keyframes up{from{transform:translateY(30px);opacity:0}}}

.auth{text-align:center}.auth label,.auth input{text-align:left}.auth .brand{justify-content:center}.auth .card{text-align:left}
.auth .btn.sm{margin:4px 4px 0 0}
.sws{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.sw{width:46px;height:46px;border-radius:14px;position:relative;border:3px solid transparent}
.sw i{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%}
.sw.on{border-color:var(--sun);outline:2px solid var(--tx)}