:root{
  --sb-blue:#0B3D91;
  --sb-blue-2:#0A2E6A;
  --sb-gray:#0F172A;
  --sb-muted:#64748B;
  --sb-bg:#F6F8FC;
  --sb-card:#FFFFFF;
  --sb-border:rgba(15, 23, 42, .10);
  --sb-danger:#B91C1C;
  --sb-ok:#166534;
  --sb-warn:#92400E;
  --sb-radius:14px;
  --sb-shadow:0 12px 30px rgba(2, 6, 23, .08);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--sb-gray);
  background:var(--sb-bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px 46px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(90deg, var(--sb-blue), var(--sb-blue-2));
  box-shadow: 0 8px 20px rgba(2,6,23,.18);
}

.topbar-inner{
  max-width: 1100px;
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
}

.brand img{
  height: 42px;
  width: auto;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.brand .titles{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
  color:#fff;
}

.brand .titles .appname{
  font-weight: 800;
  letter-spacing: .2px;
}

.brand .titles .subtitle{
  font-size: 12px;
  opacity: .92;
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex:1;
}

.nav a{
  color:#fff;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  opacity: .92;
}

.nav a:hover{
  background: rgba(255,255,255,.12);
  text-decoration:none;
  opacity: 1;
}

.user-pill{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 10px;
  color:#fff;
  font-size: 13px;
  opacity: .95;
}

.user-pill .badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.user-pill .badge strong{ font-weight: 800; }

.card{
  background: var(--sb-card);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
}

.card-header{
  padding: 16px 18px;
  border-bottom: 1px solid var(--sb-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.card-title{
  margin:0;
  font-size: 16px;
  font-weight: 800;
}

.card-subtitle{
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--sb-muted);
}

.card-body{ padding: 18px; }

.grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px;
}

@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .brand{ min-width: unset; }
}

.kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 14px;
  margin-top: 10px;
}

.kv .k{
  color: var(--sb-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.kv .v{
  font-size: 14px;
  font-weight: 700;
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
}

.label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
}

.input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  outline:none;
  background: #fff;
  font-size: 14px;
}

.input:focus, select:focus, textarea:focus{
  border-color: rgba(11,61,145,.55);
  box-shadow: 0 0 0 4px rgba(11,61,145,.12);
}

.help{
  margin-top: 6px;
  color: var(--sb-muted);
  font-size: 12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor:pointer;
  font-weight: 800;
  font-size: 14px;
  user-select:none;
}

.btn-primary{
  background: linear-gradient(180deg, #1D4ED8, #1E40AF);
  color:#fff;
  box-shadow: 0 10px 20px rgba(30,64,175,.22);
}

.btn-primary:hover{ filter: brightness(1.03); }

.btn-secondary{
  background: #EEF2FF;
  color: #1E3A8A;
  border-color: rgba(30,58,138,.18);
}

.btn-secondary:hover{ background:#E0E7FF; }

.btn-danger{
  background:#FEE2E2;
  color:#991B1B;
  border-color: rgba(153,27,27,.18);
}

.btn-ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.22);
}

.btn-ghost:hover{ background: rgba(255,255,255,.10); }

.btn-block{ width:100%; }

.alert{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  background: #F8FAFC;
  font-size: 13px;
}

.alert-danger{
  border-color: rgba(185,28,28,.22);
  background: #FEF2F2;
  color: #7F1D1D;
}

.alert-ok{
  border-color: rgba(22,101,52,.22);
  background: #ECFDF5;
  color: #14532D;
}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--sb-border);
}

.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--sb-border);
  font-size: 13px;
}

.table th{
  background: #F1F5F9;
  text-align:left;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sb-muted);
}

.table tr:last-child td{ border-bottom:none; }

.toolbar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.evidence{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.evidence-preview{
  background:#0B1220;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
}

.evidence-preview video, .evidence-preview img{
  width:100%;
  max-height: 320px;
  border-radius: 10px;
  background:#000;
}

.thumb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 640px){
  .thumb-grid{ grid-template-columns: repeat(2, 1fr); }
}

.thumb{
  border:1px solid var(--sb-border);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}

.thumb img{
  width:100%;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.thumb .thumb-meta{
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--sb-muted);
}

.footer-note{
  margin-top: 14px;
  color: var(--sb-muted);
  font-size: 12px;
}

.center{
  min-height: calc(100vh - 90px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.auth-card{
  width: 100%;
  max-width: 440px;
}

.auth-card .card-body{ padding: 22px; }
.auth-logo{
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}
.auth-logo img{ height: 46px; width:auto; }

.muted{ color: var(--sb-muted); }

/* Modal (câmera) */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 50;
}
.modal.open{ display:flex; }

.modal-card{
  width: min(980px, 100%);
  background: var(--sb-card);
  border-radius: 16px;
  border: 1px solid var(--sb-border);
  box-shadow: 0 18px 60px rgba(2,6,23,.35);
  overflow:hidden;
}

.modal-head{
  padding: 14px 16px;
  background: #F1F5F9;
  border-bottom: 1px solid var(--sb-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.modal-head h3{
  margin:0;
  font-size: 14px;
  font-weight: 900;
}

.modal-body{
  padding: 14px 16px 16px;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 12px;
}

@media (max-width: 860px){
  .modal-body{ grid-template-columns: 1fr; }
}

.cam-side{
  border-left: 1px solid var(--sb-border);
  padding-left: 12px;
}
@media (max-width: 860px){
  .cam-side{ border-left:none; padding-left:0; }
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #EEF2FF;
  border: 1px solid rgba(30,58,138,.18);
  color: #1E3A8A;
  font-weight: 800;
  font-size: 12px;
}