:root {
  --bg: #f4f5f7; --card: #ffffff; --texto: #1c2430; --suave: #5f6b7a; --linha: #e2e5ea;
  --marca: #0b5cad; --marca-txt: #ffffff;
  --ok: #1d7a46; --ok-bg: #e5f4ea; --alerta: #b54708; --alerta-bg: #fdf0e1;
  --erro: #b42318; --erro-bg: #fdeceb; --info: #475467; --info-bg: #eef0f3;
  --raio: 12px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --card: #1b2129; --texto: #e7ebf0; --suave: #9aa5b3; --linha: #2c343f;
    --marca: #4b9be8; --marca-txt: #0b1420;
    --ok: #5cc98b; --ok-bg: #16301f; --alerta: #f0a35c; --alerta-bg: #33240f;
    --erro: #f27a6e; --erro-bg: #3a1714; --info: #b4bdc8; --info-bg: #232a33; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--marca); }
.topo { position: sticky; top: 0; z-index: 5; background: var(--marca); color: var(--marca-txt);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; display: flex; align-items: center; gap: 10px; }
.topo h1 { font-size: 1.05rem; margin: 0; flex: 1; font-weight: 650; }
.topo button, .topo a { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 8px;
  padding: 5px 10px; font-size: .85rem; text-decoration: none; cursor: pointer; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; }
.suave { color: var(--suave); font-size: .88rem; }
.selo { display: inline-block; font-size: .78rem; font-weight: 650; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.selo.feito { color: var(--ok); background: var(--ok-bg); }
.selo.atrasado, .selo.problema { color: var(--erro); background: var(--erro-bg); }
.selo.pendente, .selo.em_andamento { color: var(--alerta); background: var(--alerta-bg); }
.selo.sob_demanda, .selo.pendente_semana, .selo.info { color: var(--info); background: var(--info-bg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linha);
  background: var(--card); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; font-weight: 550; }
.btn.prim { background: var(--marca); color: var(--marca-txt); border-color: var(--marca); }
.btn.perigo { color: var(--erro); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.bloco { width: 100%; }
label.campo { display: block; margin-bottom: 12px; font-size: .9rem; color: var(--suave); }
label.campo input, label.campo select, label.campo textarea, textarea.campo, input.campo, select.campo {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--bg); min-height: 44px; }
textarea { resize: vertical; min-height: 70px; }
.erro-msg { color: var(--erro); background: var(--erro-bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.ok-msg { color: var(--ok); background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.espaco { flex: 1; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fotos .ft { position: relative; }
.fotos img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linha); display: block; cursor: zoom-in; }
.fotos .x { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: var(--erro); color: #fff; font-weight: 700; cursor: pointer; line-height: 1; }
.zoom { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 16px; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.vazio { text-align: center; color: var(--suave); padding: 30px 10px; }
h2 { font-size: 1rem; margin: 22px 0 10px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.carregando { text-align: center; color: var(--suave); padding: 40px; }