:root { --verde:#a5c6ff; --verde-escuro:#6c8bc5; --sucesso:#88d498; --fundo:#0b0e15; --superficie:rgba(29,37,56,.62); --superficie-clara:rgba(255,255,255,.09); --texto:#fbf8ff; --muted:#c6d3e5; --borda:rgba(222,232,255,.18); --vermelho:#f4a4b4; --amarelo:#f7d783; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--texto); background:var(--fundo); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 8% 5%,#20283e 0,transparent 27%),radial-gradient(circle at 95% 40%,#182233 0,transparent 26%),linear-gradient(145deg,#07090f 0%,var(--fundo) 54%,#101521 100%); }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button:focus-visible,input:focus-visible { outline:3px solid var(--verde); outline-offset:3px; }
.aplicativo { width:min(100%, 580px); min-height:100vh; margin:auto; padding:22px 20px 48px; }
.cabecalho { display:flex; align-items:center; justify-content:space-between; }
.marca { display:flex; gap:10px; align-items:center; }.marca__icone { display:grid; place-items:center; width:42px; height:42px; border-radius:16px; background:linear-gradient(145deg,#bcd5ff,#6c8bc5); color:#fff; font-size:27px; font-weight:700; box-shadow:0 8px 22px rgba(135,174,255,.22); }.marca__nome,.marca__subtitulo { margin:0; }.marca__nome { font-weight:800; letter-spacing:-.02em; }.marca__subtitulo { color:var(--muted); font-size:.78rem; margin-top:2px; }
.botao-icone { border:1px solid var(--borda); border-radius:16px; width:44px; height:44px; background:var(--superficie-clara); color:var(--verde); font-size:20px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.aviso-demo { display:flex; align-items:center; gap:7px; margin:22px 0; padding:11px 14px; border:1px solid rgba(255,208,97,.22); border-radius:15px; background:rgba(122,88,6,.16); color:#ffe09a; font-size:.82rem; font-weight:650; backdrop-filter:blur(10px); }.aviso-demo span { color:var(--amarelo); }
.boas-vindas { margin:36px 0 27px; }.etiqueta,.produto__status { letter-spacing:.1em; font-weight:800; color:var(--verde); font-size:.72rem; }.boas-vindas h1 { max-width:400px; font-size:2.18rem; line-height:1.08; letter-spacing:-.045em; margin:9px 0 12px; }.boas-vindas p:not(.etiqueta) { color:var(--muted); line-height:1.5; margin:0; }
.leitura,.produto,.lista-resultados { background:linear-gradient(135deg,rgba(48,38,71,.66),rgba(22,17,35,.62)); border:1px solid var(--borda); border-radius:28px; padding:21px; box-shadow:0 20px 50px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.leitura h2,.produto h2,.lista-resultados h2 { margin:0 0 16px; font-size:1.08rem; }
.resultados-grade { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:20px; }
.produto-item { width:100%; padding:14px; border:1px solid var(--borda); border-radius:18px; background:var(--superficie-clara); color:var(--texto); cursor:pointer; text-align:left; transition:background .2s ease, transform .1s ease; display:flex; flex-direction:column; gap:4px; }
.produto-item:active { transform:scale(.98); background:rgba(255,255,255,.15); }
.produto-item .nome { font-weight:700; font-size:1rem; }
.produto-item .info { font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; }
.produto-item .preco { font-weight:800; color:var(--verde); font-size:.9rem; }
.botao { border:1px solid rgba(255,255,255,.13); border-radius:17px; padding:14px 16px; font-weight:750; min-height:52px; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }.botao:active,.acao:active,.botao-icone:active { transform:scale(.98); }.botao--principal { width:100%; background:linear-gradient(135deg,rgba(198,165,255,.23),rgba(131,97,193,.24)); color:#fbf8ff; font-size:1rem; box-shadow:inset 0 1px rgba(255,255,255,.27),0 10px 25px rgba(8,5,16,.28); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }.botao--principal:hover { background:linear-gradient(135deg,rgba(198,165,255,.34),rgba(131,97,193,.33)); box-shadow:inset 0 1px rgba(255,255,255,.35),0 12px 30px rgba(181,145,255,.14); }.botao--texto { background:transparent; color:var(--verde); text-decoration:underline; padding:8px; }
.camera { position:relative; margin-top:14px; overflow:hidden; border-radius:12px; background:#171120; color:white; text-align:center; }
.camera__viewport { position:relative; width:100%; max-height:260px; overflow:hidden; background:#000; }
.camera video { width:100%; height:100%; object-fit:cover; display:block; }
.camera__overlay { position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; z-index:10; }
.camera__viewfinder { width:70%; height:35%; border:3px solid var(--verde); border-radius:12px; position:relative; box-shadow:0 0 0 1000px rgba(0,0,0,.6); }
.camera__line { position:absolute; width:100%; height:3px; background:var(--verde); box-shadow:0 0 15px var(--verde); animation:scan 2s linear infinite; z-index:11; }
.camera__tracking-box { position:absolute; border:2px solid #fff; background:rgba(255,255,255,.3); transition:all .1s ease-out; z-index:12; pointer-events:none; }
.teste-camera h1 { margin:8px 0; font-size:1.5rem; }.teste-camera > p:not(.etiqueta) { color:var(--muted); line-height:1.45; margin:0 0 20px; }.camera__controles,.teste-camera__controles { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:14px; text-align:left; }.camera__controles label,.teste-camera__controles label { font-weight:700; font-size:.9rem; }.camera__controles input,.teste-camera__controles input { accent-color:var(--verde); }.camera__controles output,.teste-camera__controles output { min-width:38px; color:var(--verde); font-weight:750; }.teste-camera__status { min-height:44px; margin:0; padding:0 14px; color:var(--muted); line-height:1.4; }.teste-camera__dados { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; padding:0 14px 14px; }.teste-camera__dados div { padding:9px; border:1px solid var(--borda); border-radius:10px; background:rgba(255,255,255,.06); }.teste-camera__dados dt { color:var(--muted); font-size:.7rem; }.teste-camera__dados dd { margin:4px 0 0; color:var(--texto); font-size:.78rem; font-weight:700; }
@keyframes scan { 0%, 100% { top:0; } 50% { top:100%; } }
.camera p { margin:10px; font-size:.88rem; }
.camera .botao { color:white; }
.camera__foco { padding:14px; text-align:left; }
.camera__foco .botao { margin-top:8px; min-height:44px; }
.camera__foco p { margin:8px 0 0; color:var(--muted); line-height:1.4; }
.botao--foto { width:100%; margin-top:10px; min-height:48px; background:var(--superficie-clara); color:var(--verde); border:1px solid var(--borda); }
.leitura__instrucao-foto { margin:10px 0 0; color:var(--muted); font-size:.85rem; line-height:1.45; }
.divisor { display:flex; align-items:center; gap:10px; color:var(--muted); margin:18px 0; font-size:.82rem; }.divisor::before,.divisor::after { content:""; height:1px; background:var(--borda); flex:1; }
.busca label,.modal label { display:block; font-size:.85rem; font-weight:700; margin-bottom:8px; }.busca__linha { display:flex; gap:8px; }.busca input,.modal input { width:100%; border:1px solid rgba(232,222,255,.22); color:var(--texto); background:rgba(0,0,0,.18); border-radius:15px; padding:13px; outline-color:var(--verde); }.busca input::placeholder { color:#a99dbb; }.busca__linha button { width:52px; border:1px solid rgba(255,255,255,.17); border-radius:15px; background:rgba(198,165,255,.15); color:var(--verde); font-size:23px; font-weight:800; backdrop-filter:blur(12px); }
.login__senha-label { margin-top:1rem; }.login__entrar { margin-top:2rem; }.login__erro { margin-top:1rem; text-align:center; }
.campo-senha { position:relative; }.campo-senha input { padding-right:54px; }.campo-senha__alternar { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:10px; padding:0; background:transparent; color:var(--verde); font-size:1rem; }.campo-senha__alternar:hover { background:rgba(165,198,255,.12); }.campo-senha__alternar:focus-visible { outline:2px solid var(--verde); outline-offset:2px; }
.produto { margin-top:18px; border-color:rgba(198,165,255,.38); }.produto__topo { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.produto__codigo { color:var(--muted); font-size:.75rem; }.produto h2 { font-size:1.35rem; margin:13px 0 5px; }.produto__detalhes { margin-top:10px; }.produto__detalhes summary { color:var(--muted); cursor:pointer; font-size:.88rem; }.produto__detalhe,.produto__instrucao { color:var(--muted); margin:8px 0 0; font-size:.9rem; line-height:1.45; }.produto__preco { font-size:2.45rem; letter-spacing:-.05em; margin:18px 0 5px; font-weight:850; color:var(--verde); }.produto__instrucao { margin-bottom:18px; }.acoes { display:grid; grid-template-columns:1fr; gap:9px; }.acao { min-height:51px; border-radius:17px; border:1px solid; font-weight:760; background:rgba(255,255,255,.07); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); box-shadow:inset 0 1px rgba(255,255,255,.13); transition:transform .18s ease,background .18s ease; }.acao--correta { color:#d7c1ff; border-color:rgba(198,165,255,.42); }.acao--divergente { color:#f4b0bd; border-color:rgba(244,164,180,.4); }.acao--ausente { color:#f7d783; border-color:rgba(247,215,131,.37); }.mensagem,.pendencias-offline { min-height:22px; color:var(--verde); font-weight:700; text-align:center; font-size:.9rem; transition: all .2s ease; }.pendencias-offline { color:var(--amarelo); }
.mensagem--info { color:var(--verde); }
.mensagem--sucesso { color:var(--sucesso); }
.mensagem--erro { color:var(--vermelho) !important; animation: shake .4s ease-in-out; }
.mensagem--aviso { color:var(--amarelo); }
.produto--animar { animation: slideUp .4s ease-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal { color:var(--texto); border:1px solid var(--borda); border-radius:26px; background:rgba(14,31,22,.92); box-shadow:0 16px 55px rgba(0,0,0,.5); width:min(calc(100% - 32px),420px); padding:0; }.modal::backdrop { background:rgba(0,0,0,.72); }.modal form { position:relative; padding:28px; }.modal h2 { margin:8px 0; }.modal p:not(.etiqueta):not(.erro) { color:var(--muted); line-height:1.45; margin:0 0 20px; }.modal label { margin-top:14px; }.modal__fechar { position:absolute; top:13px; right:15px; border:0; background:transparent; font-size:28px; color:var(--muted); }.erro { color:#ffaaa2; min-height:20px; font-size:.84rem; margin:10px 0 0; }
.tela-encerrada { position:fixed; inset:0; z-index:5; display:grid; place-content:center; text-align:center; gap:12px; padding:24px; color:white; background:var(--verde-escuro); }.tela-encerrada span { font-size:3rem; }.tela-encerrada h1,.tela-encerrada p { margin:0; }.tela-encerrada p { opacity:.8; margin-bottom:10px; }.tela-encerrada .botao { background:white; color:var(--verde-escuro); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
.navegacao-principal { margin-top:20px; }.navegacao-principal a,.historico__voltar { display:inline-block; color:var(--verde); padding:10px 0; font-weight:700; font-size:.9rem; }.historico__voltar { margin:20px 0 12px; }a:focus-visible,select:focus-visible { outline:3px solid var(--verde); outline-offset:3px; }.historico h1 { margin:8px 0 12px; font-size:1.6rem; letter-spacing:-.025em; }.historico__descricao { color:var(--muted); font-size:.9rem; line-height:1.5; }.historico__filtros { display:flex; align-items:flex-end; gap:12px; margin-top:22px; }.historico__filtros > div { flex:1; min-width:0; }.historico__filtros label { display:block; margin-bottom:8px; font-weight:700; font-size:.85rem; }.historico__filtros select { width:100%; min-height:52px; padding:12px; border:1px solid var(--borda); border-radius:15px; background:#131c20; color:var(--texto); font:inherit; }.historico__filtros .botao { width:auto; }.historico__mensagem { color:var(--muted); line-height:1.5; }.historico__total { color:var(--muted); font-size:.85rem; }.historico__lista { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }.historico__registro { padding:17px; border:1px solid var(--borda); border-radius:18px; background:var(--superficie-clara); overflow-wrap:anywhere; }.historico__registro h2 { font-size:1rem; line-height:1.4; margin:10px 0 14px; }.historico__resultado { display:inline-block; padding:5px 9px; border-radius:8px; font-size:.8rem; font-weight:800; background:rgba(255,255,255,.06); color:var(--muted); }.historico__resultado--correta { color:var(--sucesso); }.historico__resultado--divergente { color:var(--vermelho); }.historico__resultado--ausente { color:var(--amarelo); }.historico__registro dl { display:grid; gap:8px; margin:0; }.historico__registro dl > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; }.historico__registro dt { color:var(--muted); font-size:.8rem; }.historico__registro dd { margin:0; font-size:.85rem; }.historico__paginacao { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:20px; }.historico__paginacao .botao { padding:10px; background:var(--superficie-clara); color:var(--verde); font-size:.8rem; }.historico__paginacao span { color:var(--muted); font-size:.78rem; text-align:center; }
@media (min-width:600px) { .aplicativo { padding-top:35px; }.acoes { grid-template-columns:1fr 1fr; }.acao--ausente { grid-column: 1 / -1; } }
.historico__filtros { flex-wrap:wrap; }.historico__filtros > div { flex:1 1 150px; }.historico__filtros .botao { flex:0 0 100%; }