:root{--ok:#15803d;--okbg:#dcfce7;--warn:#a16207;--warnbg:#fef3c7;--bad:#b91c1c;--badbg:#fee2e2;--txt:#111827;--mut:#6b7280;--bord:#d1d5db;--card:#fff;--fundo:#f3f4f6;--azul:#1d4ed8;--vc:#b91c1c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fundo);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
input,select,textarea{font-family:inherit}
.esconde{display:none!important}
.wrap{max-width:720px;margin:0 auto;padding:10px 12px 90px}
.carregando-app{padding:40px;text-align:center;font-size:22px}
/* topo */
.topo{display:flex;align-items:center;gap:8px;background:var(--vc);color:#fff;padding:10px 12px;border-radius:0 0 14px 14px;margin:-10px -12px 10px}
.topo .marca{font-weight:900;font-size:20px;letter-spacing:.5px}
.topo .quem{flex:1;font-size:15px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo .quem b{font-size:17px}
.chip{border-radius:999px;padding:5px 10px;font-size:13px;font-weight:800;white-space:nowrap}
.chip.on{background:#dcfce7;color:#14532d}
.chip.fila{background:#fde68a;color:#78350f}
.chip.off{background:#fecaca;color:#7f1d1d}
.topo .sair{background:transparent;border:2px solid #fff;color:#fff;border-radius:10px;padding:6px 10px;font-weight:800;font-size:14px}
/* modos */
.modos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.modos.cinco{grid-template-columns:repeat(5,1fr)}
.modo{border:3px solid var(--bord);background:#fff;border-radius:12px;min-height:64px;font-size:17px;font-weight:900;padding:6px 2px;line-height:1.1;color:var(--txt)}
.modo small{display:block;font-size:12px;font-weight:600;color:var(--mut)}
.modo.ativo{background:#111827;color:#fff;border-color:#111827}
.modo.ativo small{color:#d1d5db}
/* leitor */
.leitor{background:var(--card);border-radius:14px;padding:10px;border:2px solid var(--bord);margin-bottom:10px}
.leitor label{display:block;font-size:15px;font-weight:700;color:var(--mut);margin-bottom:6px}
#cod{width:100%;font-size:22px;padding:14px;border:3px solid var(--azul);border-radius:12px;background:#eff6ff}
.bts{display:flex;gap:8px;margin-top:8px}
.bt{flex:1;border:0;border-radius:12px;padding:16px 10px;font-size:19px;font-weight:900;color:#fff;background:var(--azul)}
.bt.cinza{background:#4b5563}.bt.verde{background:var(--ok)}.bt.verm{background:var(--bad)}.bt.amar{background:#ca8a04}.bt.roxo{background:#6d28d9}.bt.preto{background:#111827}
.bt.claro{background:#fff;color:var(--txt);border:3px solid var(--bord)}
.bt:disabled{opacity:.5}
.grande{display:block;width:100%;margin-top:10px;font-size:22px;padding:18px}
/* resultado */
.cartao{background:var(--card);border-radius:16px;padding:12px;border:3px solid var(--bord);margin-bottom:12px}
.cartao.ok{border-color:var(--ok)}.cartao.warn{border-color:#ca8a04}.cartao.bad{border-color:var(--bad)}
.faixa{border-radius:12px;padding:18px 12px;text-align:center;font-size:30px;font-weight:900;line-height:1.15;margin-bottom:8px;color:#fff;background:#4b5563}
.faixa small{display:block;font-size:17px;font-weight:700;margin-top:6px;line-height:1.3}
.faixa.ok{background:var(--ok)}.faixa.warn{background:#ca8a04}.faixa.bad{background:var(--bad)}.faixa.cinza{background:#4b5563}.faixa.azul{background:var(--azul)}
.canal{font-size:26px;font-weight:900}
.canal .conta{font-size:20px;margin-left:8px;color:var(--mut)}
.meta{font-size:15px;color:#374151;margin:4px 0;word-break:break-word}
.obs{background:var(--warnbg);color:#78350f;border-radius:10px;padding:8px 10px;margin-top:8px;font-size:15px;font-weight:600}
.carregando{font-size:20px;text-align:center;padding:16px;color:var(--mut)}
.item{border-top:2px solid #e5e7eb;padding:10px 0}
.item .linha1{display:flex;gap:10px;align-items:flex-start}
.item .qtd{font-size:34px;font-weight:900;min-width:64px;text-align:center}
.item .tit{font-size:17px;font-weight:700}
.item .sku{font-size:14px;color:var(--mut)}
.item .var{font-size:16px;font-weight:700;margin-top:3px}
.fotoprod{max-width:120px;max-height:120px;border-radius:8px;margin-top:6px}
.kit{background:#f9fafb;border-radius:10px;padding:8px;margin-top:8px}
.kit h4{margin:0 0 4px;font-size:14px;color:var(--mut)}
.comp{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;padding:3px 0}
.comp .n{min-width:48px;text-align:right;font-size:22px;font-weight:900}
.q{display:inline-block;width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.25);vertical-align:middle;margin-right:4px}
.estbt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.estbt button{border:3px solid var(--bord);background:#fff;border-radius:10px;padding:14px 4px;font-size:16px;font-weight:900}
.estbt button.sel.bom{background:var(--ok);color:#fff;border-color:var(--ok)}
.estbt button.sel.estragado{background:#ca8a04;color:#fff;border-color:#ca8a04}
.estbt button.sel.nao_veio{background:#4b5563;color:#fff;border-color:#4b5563}
.prev{font-size:14px;color:#374151;margin-top:6px}
.prev.lancar{color:var(--ok);font-weight:700}.prev.pendencia{color:var(--warn);font-weight:700}
textarea,.campo{width:100%;font-size:18px;padding:12px;border:3px solid var(--bord);border-radius:10px;margin-top:6px}
.num{width:100%;font-size:30px;padding:12px;border:3px solid var(--bord);border-radius:10px;text-align:center;margin-top:8px}
.pergunta{font-size:24px;font-weight:900;text-align:center;margin:10px 0}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;margin:4px 4px 0 0}
/* lista do dia */
.ld-cab{background:#111827;color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ld-num{font-size:19px;font-weight:700;line-height:1.35}
.ld-num b{font-size:32px;font-weight:900}
.ld-num .f{color:#facc15}
.ld-barra{height:16px;background:#374151;border-radius:8px;overflow:hidden;margin-top:8px}
.ld-barra i{display:block;height:100%;width:0;background:#22c55e;transition:width .4s}
.ld-sub{font-size:14px;color:#d1d5db;margin-top:6px}
.ld-grupos{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.ld-g{background:#fff;border:3px solid var(--bord);border-radius:12px;padding:10px;font-size:15px}
.ld-g b{font-size:18px;display:block}
.ld-g .falta{color:var(--bad);font-weight:900;font-size:22px}
.ld-g.fechado{border-color:var(--ok);background:var(--okbg)}
.ld-g button{margin-top:6px;width:100%;border:0;border-radius:8px;padding:10px;font-weight:900;font-size:15px;background:#2563eb;color:#fff}
.abas{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
.aba{border:3px solid var(--bord);background:#fff;border-radius:10px;padding:10px;font-weight:900;font-size:16px}
.aba.ativo{background:#111827;color:#fff;border-color:#111827}
.ld-row{display:flex;gap:8px;align-items:flex-start;border-top:1px solid #e5e7eb;padding:9px 0;font-size:15px}
.ld-row .t{flex:1;min-width:0;word-break:break-word;line-height:1.3}
.ld-row small{display:block;color:var(--mut);font-size:13px}
.tag{font-size:13px;font-weight:900;border-radius:6px;padding:3px 7px;white-space:nowrap}
.tag.ok{background:var(--okbg);color:var(--ok)}.tag.bad{background:var(--badbg);color:var(--bad)}.tag.warn{background:var(--warnbg);color:var(--warn)}.tag.cinza{background:#e5e7eb;color:#374151}
.ant{display:inline-block;background:#fef3c7;color:#92400e;font-weight:800;border-radius:5px;padding:1px 6px;margin-right:4px;font-size:12px}
.grupo-tit{font-size:17px;font-weight:900;margin:14px 0 2px;padding:6px 8px;background:#f3f4f6;border-radius:8px}
/* sessao */
.sessao h3{margin:14px 0 6px;font-size:18px}
.rl{display:flex;gap:8px;align-items:center;border-top:1px solid #e5e7eb;padding:7px 0;font-size:15px}
.rl .t{flex:1;min-width:0;word-break:break-word}
.rl .h{color:var(--mut);font-size:13px}
/* full */
.fu-cab{background:#111827;color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.fu-cab .nome{font-size:22px;font-weight:900}
.fu-cab .tot b{font-size:30px}
.fu-row{display:flex;gap:10px;align-items:center;border-top:1px solid #e5e7eb;padding:9px 0}
.fu-row .n{font-size:30px;font-weight:900;min-width:56px;text-align:center}
.fu-row .t{flex:1;min-width:0;font-size:15px}
.fu-row button{border:0;border-radius:8px;padding:12px;font-weight:900;background:#e5e7eb;font-size:16px}
.fu-img{max-width:140px;max-height:140px;border-radius:8px;display:block;margin:6px auto}
.grandeN{font-size:56px;font-weight:900;text-align:center}
/* login */
.login{max-width:520px;margin:0 auto;padding:20px 14px}
.login h1{text-align:center;color:var(--vc);font-size:30px;margin:10px 0 4px}
.login p{text-align:center;color:var(--mut);margin:0 0 14px}
.nomes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.nomes button{border:3px solid var(--bord);background:#fff;border-radius:12px;padding:18px 6px;font-size:20px;font-weight:900}
.pin-dots{display:flex;justify-content:center;gap:14px;margin:16px 0}
.pin-dots i{width:22px;height:22px;border-radius:50%;border:3px solid #111827}
.pin-dots i.on{background:#111827}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.teclado button{border:0;background:#fff;border-radius:14px;padding:20px 0;font-size:30px;font-weight:900;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.erro{color:var(--bad);font-weight:800;text-align:center;margin:8px 0;min-height:22px}
/* camera */
.cam{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column}
.cam video{flex:1;width:100%;object-fit:cover}
.cam .mira{position:absolute;left:10%;right:10%;top:30%;bottom:30%;border:4px solid #22c55e;border-radius:16px;pointer-events:none}
.cam .cam-txt{position:absolute;top:12px;left:0;right:0;text-align:center;color:#fff;font-weight:900;font-size:18px;text-shadow:0 1px 3px #000}
.cam .cam-bts{display:flex;gap:8px;padding:10px;background:#000}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:60}
/* admin */
.adm h3{margin:16px 0 6px}
.adm table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.adm td,.adm th{border-bottom:1px solid #e5e7eb;padding:6px 4px;text-align:left;vertical-align:top}
.linha-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.linha-form input,.linha-form select{flex:1;min-width:90px;font-size:17px;padding:10px;border:2px solid var(--bord);border-radius:8px}
.linha-form button{font-size:16px;padding:10px 14px;border:0;border-radius:8px;background:var(--azul);color:#fff;font-weight:800}
@media (max-width:520px){.modo{font-size:15px;min-height:58px}.faixa{font-size:26px}.canal{font-size:22px}.modos.cinco{grid-template-columns:repeat(3,1fr)}}