:root{--azul:#1f4e78;--azul2:#2d6cb5;--cinza:#f4f6f9;--borda:#d9dee5;
--amarelo:#fff2cc;--verde:#1e7d34;--vermelho:#b00020;}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cinza);color:#1f2733}
header{background:var(--azul);color:#fff;padding:12px 22px;display:flex;
align-items:center;justify-content:space-between}
header .brand{font-weight:bold;font-size:18px}
header nav a{color:#dbe7f5;text-decoration:none;margin-left:18px;font-size:14px}
header nav a:hover{color:#fff;text-decoration:underline}
.container{max-width:1100px;margin:24px auto;padding:0 18px}
.card{background:#fff;border:1px solid var(--borda);border-radius:8px;
padding:22px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
h1{font-size:22px;margin:0 0 6px} h2{font-size:17px;color:var(--azul)}
label{display:block;font-size:13px;margin:10px 0 4px;color:#41505f}
input,select{width:100%;padding:9px 11px;border:1px solid var(--borda);
border-radius:6px;font-size:14px}
button,.btn{background:var(--azul2);color:#fff;border:0;padding:10px 18px;
border-radius:6px;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--azul)}
.btn-sec{background:#5b6b7b}.btn-sec:hover{background:#41505f}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{border:1px solid var(--borda);padding:7px 9px;text-align:left}
th{background:var(--azul);color:#fff}
tr:nth-child(even) td{background:#fafbfc}
.review{background:var(--amarelo)!important}
.msg{padding:10px 14px;border-radius:6px;margin:10px 0;font-size:14px}
.msg.err{background:#fde7ea;color:var(--vermelho)}
.msg.ok{background:#e6f4ea;color:var(--verde)}
.badge{font-size:11px;padding:2px 8px;border-radius:10px;background:#e7eef7;color:var(--azul)}
.login-wrap{max-width:380px;margin:8vh auto}
.muted{color:#7a8896;font-size:13px}
.drop{border:2px dashed var(--azul2);border-radius:8px;padding:26px;text-align:center;
background:#f7fafd;color:#41505f}
.tag-conf{font-size:11px;color:#7a8896}

/* --- tabela com rolagem horizontal (mobile) --- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- captura de fotos --- */
.capture-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.capture-row .btn{flex:1;min-width:150px;text-align:center;padding:14px 18px;font-size:15px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:8px 0}
.thumb{position:relative;border:1px solid var(--borda);border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:#f0f3f7}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .rm{position:absolute;top:3px;right:3px;background:rgba(176,0,32,.92);color:#fff;border:0;
border-radius:50%;width:22px;height:22px;font-size:14px;line-height:1;cursor:pointer}
.count-pill{display:inline-block;background:#e7eef7;color:var(--azul);border-radius:12px;padding:3px 12px;font-size:13px}
.btn-lg{width:100%;padding:16px;font-size:16px;margin-top:6px}
.btn-block{display:block;width:100%;text-align:center}
.hidden{display:none!important}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;
border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- responsivo mobile --- */
@media (max-width:640px){
  header{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 16px}
  header nav{display:flex;flex-wrap:wrap;gap:4px 0}
  header nav a{margin-left:0;margin-right:16px}
  .container{margin:14px auto;padding:0 12px}
  .card{padding:16px}
  h1{font-size:20px}
  button,.btn{width:100%}
  .capture-row .btn{min-width:0}
  table{font-size:12px}
  th,td{padding:6px 7px}
}