:root{
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e6eaf0; --border-2:#eef2f7;
  --txt:#0f172a; --txt-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --primary:#4f46e5; --primary-d:#4338ca; --primary-tint:#eef2ff;
  --entrada:#059669; --entrada-tint:#ecfdf5; --entrada-d:#047857;
  --saida:#e11d48; --saida-tint:#fff1f3; --saida-d:#be123c;
  --ok:#16a34a; --amber:#d97706;
  --radius:16px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
input,select{font-family:inherit;font-size:16px}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
header .brand{width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--primary),#6366f1);
  display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow)}
header .title{font-weight:700;font-size:16px;flex:1;letter-spacing:-.01em}
header .dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
header .dot.online{background:var(--ok)} header .dot.offline{background:var(--saida)}
header select{
  background:var(--surface-2);color:var(--txt-2);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;max-width:40vw;font-weight:600;font-size:14px
}

/* ---------- mode toggle (segmented) ---------- */
.modebar{display:flex;gap:6px;padding:14px 14px 4px;background:var(--surface);border-bottom:1px solid var(--border)}
.modebar button{
  flex:1;padding:15px 6px;font-size:17px;font-weight:800;letter-spacing:.3px;
  background:var(--surface-2);color:var(--muted);border:1.5px solid var(--border);
  border-radius:13px;transition:transform .08s, box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:8px
}
.modebar button:active{transform:scale(.98)}
.modebar button.on-entrada{background:var(--entrada);color:#fff;border-color:var(--entrada-d);box-shadow:0 4px 12px rgba(5,150,105,.32)}
.modebar button.on-saida{background:var(--saida);color:#fff;border-color:var(--saida-d);box-shadow:0 4px 12px rgba(225,29,72,.32)}
.modehint{text-align:center;color:var(--muted);font-size:12.5px;padding:6px 12px 10px;background:var(--surface);border-bottom:1px solid var(--border);font-weight:500}

/* ---------- views ---------- */
main{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 14px 14px}
.view{display:none;flex-direction:column;gap:14px;min-height:0;flex:1}
.view.active{display:flex}

/* ---------- camera ---------- */
.camera-wrap{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#0b1220;
  aspect-ratio:3/4;max-height:46dvh;box-shadow:var(--shadow);border:1px solid var(--border)
}
.camera-wrap.saida{box-shadow:0 0 0 3px var(--saida), var(--shadow)}
.camera-wrap.entrada{box-shadow:0 0 0 3px var(--entrada), var(--shadow)}
video{width:100%;height:100%;object-fit:cover;display:block;background:#0b1220}
.reticle{position:absolute;inset:22% 7%;pointer-events:none;box-shadow:0 0 0 100vmax rgba(11,18,32,.30)}
.reticle .cnr{position:absolute;width:30px;height:30px;border:3px solid #fff;border-radius:3px}
.reticle .tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.reticle .tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.reticle .bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.reticle .br{bottom:-2px;right:-2px;border-left:none;border-top:none}
.reticle .scanline{position:absolute;left:2px;right:2px;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#818cf8,transparent);box-shadow:0 0 8px #818cf8;
  animation:scan 1.9s ease-in-out infinite}
@keyframes scan{0%{top:6%}50%{top:92%}100%{top:6%}}
.cam-controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px;justify-content:center}
.cam-controls button{
  background:rgba(255,255,255,.92);color:#0f172a;border-radius:11px;
  padding:10px 16px;font-size:14px;font-weight:700;backdrop-filter:blur(6px);box-shadow:var(--shadow)
}
.cam-controls button:disabled{opacity:.45}
.cam-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:#cbd5e1;font-size:14px;line-height:1.6}
.cam-msg b{color:#fff}

/* ---------- last scan card ---------- */
.last{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:8px;min-height:86px;box-shadow:var(--shadow)
}
.last.flash-ok{animation:flashok .6s} .last.flash-dup{animation:flashdup .6s}
@keyframes flashok{from{background:var(--entrada-tint)}to{background:var(--surface)}}
@keyframes flashdup{from{background:var(--saida-tint)}to{background:var(--surface)}}
.last .big{font-size:21px;font-weight:800;word-break:break-all;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.last .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.tag.seur{background:var(--primary-tint);border-color:#c7d2fe;color:var(--primary-d)}
.tag.ontime{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.tag.gls{background:#fffbeb;border-color:#fde68a;color:#b45309}
.tag.sending{background:#f0fdfa;border-color:#99f6e4;color:#0f766e}
.tag.desconhecida{background:#f8fafc;border-color:#e2e8f0;color:#64748b}
.tag.vol{background:#eef2ff;border-color:#c7d2fe;color:#4338ca}
.tag.entrada{background:var(--entrada-tint);border-color:#a7f3d0;color:var(--entrada-d)}
.tag.saida{background:var(--saida-tint);border-color:#fecdd3;color:var(--saida-d)}
.last .when{color:var(--muted);font-size:12.5px}
.last .placeholder{color:var(--muted);display:flex;align-items:center;gap:8px}

/* ---------- lista viva de picados (ecrã de scan) ---------- */
.scanlist{overflow:auto;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px;-webkit-overflow-scrolling:touch}
.row.just-added{animation:rowin .7s ease-out}
@keyframes rowin{0%{background:var(--entrada-tint);transform:translateY(-6px);opacity:.4}100%{transform:none;opacity:1}}

/* ---------- janela Confirmar / Cancelar (bottom sheet) ---------- */
.modal{position:fixed;inset:0;z-index:55;display:none;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.45)}
.modal.show{display:flex;animation:fadein .15s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal .sheet{width:100%;max-width:520px;background:var(--surface);border-radius:24px 24px 0 0;
  padding:24px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 34px rgba(16,24,40,.22);
  animation:sheetup .22s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.cf-mode{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.6px;padding:6px 14px;border-radius:999px;color:#fff;background:var(--muted)}
.cf-mode.entrada{background:var(--entrada)} .cf-mode.saida{background:var(--saida)}
.cf-track{font-size:27px;font-weight:800;word-break:break-all;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:14px 0 10px}
.cf-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cf-when{color:var(--txt-2);font-size:15px;font-weight:700}
.cf-actions{display:flex;gap:12px;margin-top:22px}
.cf-actions button{flex:1;padding:18px 8px;border-radius:15px;font-size:18px;font-weight:800}
.cf-cancel{flex:.7;background:var(--surface-2);color:var(--txt-2);border:1.5px solid var(--border)}
.cf-ok{background:var(--entrada);color:#fff;box-shadow:0 6px 16px rgba(5,150,105,.34)}
.cf-ok:active{background:var(--entrada-d)}

/* ---------- manual entry ---------- */
.manual{display:flex;gap:8px}
.manual input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px;color:var(--txt);box-shadow:var(--shadow)}
.manual input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.manual button{background:var(--primary);color:#fff;border-radius:var(--radius-sm);padding:0 20px;font-weight:700;font-size:15px;box-shadow:var(--shadow)}
.manual button:active{background:var(--primary-d)}
.section-label{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:4px 2px -6px}

/* ---------- history ---------- */
.stats{display:flex;gap:10px}
.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 10px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.stat.ent b{color:var(--entrada)} .stat.sai b{color:var(--saida)} .stat.dup b{color:var(--amber)}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.histbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.histbar select,.histbar input{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--txt);box-shadow:var(--shadow)}
.histbar input[type=search]{flex:1;min-width:120px}
.histlist{overflow:auto;display:flex;flex-direction:column;gap:8px;flex:1;-webkit-overflow-scrolling:touch}
.row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow)}
.row.dup{border-color:#fecdd3;background:var(--saida-tint)}
.row .ico{font-size:18px;width:24px;text-align:center}
.row .body{flex:1;min-width:0}
.row .t{font-weight:700;word-break:break-all;font-variant-numeric:tabular-nums}
.row .s{font-size:12px;color:var(--muted);margin-top:1px}
.row .del{flex:none;background:none;border:none;color:var(--faint);font-size:17px;line-height:1;padding:8px 8px;border-radius:9px;align-self:center}
.row .del:active{background:var(--surface-2)}
.row .del.armed{background:var(--saida-tint);color:var(--saida-d);font-size:13px;font-weight:800;padding:8px 12px}
.btn-block{display:block;width:100%;background:var(--primary);padding:14px;border-radius:var(--radius-sm);font-weight:700;text-align:center;font-size:15px;text-decoration:none;color:#fff;box-shadow:var(--shadow)}

/* ---------- diagnostico ---------- */
.diag p{color:var(--txt-2);font-size:13.5px;line-height:1.6}
.diag pre{background:#0f172a;color:#e2e8f0;border-radius:var(--radius-sm);padding:14px;overflow:auto;font-size:13px;white-space:pre-wrap;word-break:break-all;box-shadow:var(--shadow);font-family:ui-monospace,Menlo,monospace}
.engine{font-size:12px;color:var(--muted)}
.engine b{color:var(--txt-2)}

/* ---------- bottom nav ---------- */
nav{display:flex;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -1px 2px rgba(16,24,40,.04)}
nav button{flex:1;padding:10px 4px 8px;background:none;color:var(--faint);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:600}
nav button .ic{font-size:21px;opacity:.7}
nav button.active{color:var(--primary)}
nav button.active .ic{opacity:1}

/* ---------- duplicate overlay (alarme) ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:var(--saida);color:#fff;animation:pulse 1.1s ease-in-out infinite}
.overlay.show{display:flex}
@keyframes pulse{0%,100%{background:#e11d48}50%{background:#9f1239}}
.overlay .x{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:54px}
.overlay h1{font-size:31px;margin:18px 0 6px;font-weight:900;letter-spacing:.3px}
.overlay .info{font-size:16px;opacity:.96;word-break:break-all;line-height:1.5}
.overlay .info b{font-variant-numeric:tabular-nums}
.overlay .when{margin-top:12px;font-size:15px;font-weight:700;background:rgba(0,0,0,.22);padding:9px 16px;border-radius:11px}
.overlay .actions{display:flex;gap:12px;margin-top:30px;width:100%;max-width:440px}
.overlay .actions button{flex:1;padding:18px 8px;border-radius:14px;font-size:17px;font-weight:800;box-shadow:var(--shadow-lg)}
.overlay .ignore{background:#fff;color:var(--saida-d)}
.overlay .force{background:#1e293b;color:#fff}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#1e293b;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;z-index:60;pointer-events:none;max-width:90vw;text-align:center;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{background:var(--saida-d)}
.hidden{display:none!important}