:root{--bg:#f6f4ee;--card:#fff;--ink:#1d2433;--mut:#5d6677;--blue:#1f3a5f;--ok:#1f8a4c;--okbg:#dff3e6;--bad:#c0392b;--badbg:#fbe1de;--warn:#a86a00;--warnbg:#fff0c9;--line:#d9d5c8}
@media(prefers-color-scheme:dark){:root{--bg:#12161d;--card:#1b212b;--ink:#eef0f4;--mut:#a3acbb;--blue:#8fb3e8;--ok:#58d38c;--okbg:#17382a;--bad:#ff8a7c;--badbg:#42201c;--warn:#ffc65c;--warnbg:#3e3114;--line:#2e3644}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:20px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
header{background:#1f3a5f;color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
header h1{margin:0;font-size:1.3rem}header p{margin:2px 0 0;font-size:.8rem;opacity:.85}
main{max-width:640px;margin:0 auto;padding:16px}
[hidden]{display:none!important}
.field{display:block;font-size:.9rem;color:var(--mut);margin-bottom:14px}
.field input{display:block;width:100%;margin-top:6px;padding:14px;font-size:1.1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.btn{display:block;width:100%;text-align:center;padding:14px;margin:0 0 12px;font:inherit;font-weight:600;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.btn.primary{background:#1f3a5f;color:#fff;border-color:#1f3a5f}
.btn.big{padding:20px;font-size:1.15rem}
.bar{display:flex;gap:10px}.bar .btn{width:auto;flex:1;padding:10px}
.hint{font-size:.85rem;color:var(--mut)}
#loading{text-align:center;padding:60px 0}.spin{width:48px;height:48px;margin:0 auto 14px;border:5px solid var(--line);border-top-color:#1f3a5f;border-radius:50%;animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
h2{margin:6px 0 12px;font-size:1.3rem}h3{margin:22px 0 8px;font-size:1.05rem}h3 small{font-weight:400;color:var(--mut);font-size:.8rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center}
.card b{display:block;font-size:1.6rem}.card span{font-size:.7rem;color:var(--mut)}
.card.ok b{color:var(--ok)}.card.bad b{color:var(--bad)}
.pend{margin-top:12px;background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 14px;font-size:.9rem;font-weight:600}
.erros{list-style:none;margin:0;padding:0}
.erros li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--bad);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.erros li .n{font-size:1.4rem;font-weight:800;min-width:2.4ch}.erros li .t{flex:1;font-size:.95rem}
.erros li .t b{font-size:1.1rem}.erros .vazio{border-left-color:var(--ok);color:var(--ok);font-weight:600}
.erros .brn{border-left-color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cell{border:1.5px solid var(--line);border-radius:10px;background:var(--card);padding:6px 2px;text-align:center;font:inherit;color:var(--ink);cursor:pointer}
.cell i{display:block;font-style:normal;font-size:.7rem;color:var(--mut)}.cell b{font-size:1.15rem}
.cell.ok{background:var(--okbg);border-color:var(--ok)}.cell.bad{background:var(--badbg);border-color:var(--bad)}
.cell.warn{background:var(--warnbg);border-color:var(--warn)}.cell.anul{opacity:.55;border-style:dashed}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;z-index:5}
.panel{background:var(--bg);width:100%;max-width:640px;margin:0 auto;border-radius:20px 20px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
.panel h4{margin:0;font-size:1.2rem}.panel p{margin:2px 0 12px;color:var(--mut);font-size:.9rem}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.keys button{padding:16px 0;font:inherit;font-size:1.3rem;font-weight:800;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.num{display:flex;gap:8px;margin-bottom:12px}.num input{flex:1;padding:12px;font-size:1.1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}.num .btn{width:90px;margin:0}
.photo{position:fixed;inset:0;background:#000;z-index:6;padding:10px;display:flex;flex-direction:column;gap:8px}.photo>div{flex:1;overflow:auto}.photo img{width:200%;max-width:none}
