:root{--navy:#173b72;--navy2:#0f2a54;--green:#2a9d4e;--green2:#1f7a3b;--gold:#f6b829;--cream:#fff6dc;--ink:#1c2433;--mut:#5d6b84;--line:#e6d9b0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding:0 0 32px}
button,input{font:inherit}
.top{background:var(--navy);color:#fff;padding:18px 20px 64px;border-radius:0 0 28px 28px}
.top h1{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.top h1 b{color:var(--gold)}
.top p{margin:4px 0 0;opacity:.8;font-size:.9rem}
.bar{display:flex;justify-content:space-between;align-items:center}
.link{background:none;border:0;color:#cfe0ff;font-size:.85rem;padding:6px 0;cursor:pointer}
.panel{background:#fff;border-radius:22px;margin:-48px 16px 0;padding:18px;box-shadow:0 10px 30px rgba(23,59,114,.14)}
.goal{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.goal small{color:var(--mut);display:block;font-size:.8rem}
.goal strong{font-size:2rem;line-height:1;font-weight:800;color:var(--navy)}
.goal .r{text-align:right}.goal .r strong{color:var(--green)}
.prog{height:12px;border-radius:99px;background:#e9eef7;margin:14px 0 6px;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#58c27a);border-radius:99px;transition:width .35s}
.meta{display:flex;justify-content:space-between;font-size:.82rem;color:var(--mut)}
.sec{padding:22px 16px 0}
.sec h2{margin:0 4px 12px;font-size:1.05rem;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ball{aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);background:#fff;color:var(--navy);font-weight:800;font-size:1.15rem;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .2s;padding:0}
.ball:active{transform:scale(.9)}
.ball.on{background:var(--green);border-color:var(--green2);color:#fff;font-size:0}
.ball.on::after{content:"";width:34%;height:18%;border:solid #fff;border-width:0 0 4px 4px;transform:rotate(-45deg) translate(1px,-2px)}
.ball:focus-visible,.btn:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hint{margin:12px 4px 0;font-size:.82rem;color:var(--mut)}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:15px;font-weight:800;font-size:1rem;background:var(--navy);color:#fff;cursor:pointer;margin-top:16px}
.btn.gold{background:var(--gold);color:var(--navy2)}
.btn:disabled{opacity:.5}
.rules{margin:22px 16px 0;padding:16px;border-radius:18px;background:#fff;border:2px dashed var(--line);font-size:.9rem;line-height:1.5}
.rules b{color:var(--navy)}
.auth{padding:34px 22px}
.auth .logo{width:84px;height:84px;border-radius:22px;margin:0 auto 14px;display:block}
.auth h1{text-align:center;margin:0;color:var(--navy);font-size:1.7rem}
.auth h1 b{color:var(--green)}
.auth .sub{text-align:center;color:var(--mut);margin:6px 0 22px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#efe4bd;border-radius:14px;padding:4px;margin-bottom:18px}
.tabs button{border:0;background:none;padding:11px;border-radius:11px;font-weight:700;color:var(--mut);cursor:pointer}
.tabs button.on{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.08)}
label{display:block;font-weight:700;font-size:.88rem;margin:14px 0 6px;color:var(--navy)}
input{width:100%;padding:14px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:1.05rem}
input.pin{letter-spacing:.6em;text-align:center;font-size:1.3rem}
.done{text-align:center;padding:10px 0 0}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;font-size:.9rem;z-index:9}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.foot{max-width:480px;margin:0 auto;padding:8px 20px 28px;text-align:center;font-size:.8rem;color:var(--mut)}
.foot nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.foot a,.foot button{color:var(--navy);background:none;border:0;padding:6px 0;text-decoration:underline;cursor:pointer;font-size:.8rem}
.foot p{margin:6px 0 0}
.legal{font-size:.8rem;color:var(--mut);text-align:center;margin:12px 0 0}
.legal a{color:var(--navy)}
/* privacidade */
.doc{max-width:640px;margin:0 auto;padding:24px 20px 8px;line-height:1.6}
.doc h1{color:var(--navy);margin:8px 0 4px}.doc h2{color:var(--navy);font-size:1.1rem;margin:26px 0 6px}
.doc .back{display:inline-block;color:var(--navy);padding:6px 0}.doc small{color:var(--mut)}
/* admin */
.adm{max-width:760px;margin:0 auto;padding:0 16px 32px}
.adm .top{margin:0 -16px;padding-bottom:22px;border-radius:0 0 22px 22px}
.nav{display:flex;gap:8px;margin:16px 0}.nav button{flex:1;border:0;padding:12px;border-radius:12px;background:#efe4bd;font-weight:700;color:var(--mut);cursor:pointer}
.nav button.on{background:var(--navy);color:#fff}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border-radius:16px;padding:14px;box-shadow:0 4px 14px rgba(23,59,114,.08)}
.card small{color:var(--mut);display:block;font-size:.78rem}.card strong{font-size:1.6rem;color:var(--navy)}
.card em{display:block;font-style:normal;font-size:.75rem;color:var(--mut);margin-top:2px}
.adm h2{color:var(--navy);font-size:1rem;margin:22px 2px 10px}
.chart{display:flex;align-items:flex-end;gap:5px;height:130px;background:#fff;border-radius:16px;padding:14px 10px 8px}
.chart div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:.65rem;color:var(--mut)}
.chart i{display:block;width:100%;background:var(--green);border-radius:6px 6px 0 0;min-height:2px}
.urow{background:#fff;border-radius:16px;padding:14px;margin-bottom:10px}
.urow header{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.urow b{color:var(--navy)}.urow small{color:var(--mut);display:block}
.tag{font-size:.72rem;padding:3px 9px;border-radius:99px;background:#e7f6ec;color:var(--green2);font-weight:700;white-space:nowrap}
.tag.red{background:#fde7e7;color:#b42318}.tag.gold{background:#fff1cc;color:#8a6100}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.acts button{border:2px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-size:.8rem;font-weight:700;color:var(--navy);cursor:pointer}
.acts button.danger{color:#b42318;border-color:#f3c2c2}
.search{margin-bottom:12px}