* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;<br/>
  background: #000;<br/>
  color: #fff;<br/>
  min-height: 100vh;
}
.tela { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }<br/>
.oculta { display: none !important; }<br/>
h1 { color: #FF9933; font-size: 1.8rem; text-align: center; }<br/>
.sub { color: #ccc; margin: 8px 0 20px; text-align: center; }<br/>
.loginBox { width: 100%; max-width: 360px; text-align: center; }
.loginBox input {
  width: 100%; padding: 14px; margin: 10px 0; border-radius: 10px;<br/>
  border: 2px solid #333; background: #111; color: #fff; font-size: 1rem;
}
.btnPrimario {
  width: 100%; padding: 14px; margin-top: 10px; border: none; border-radius: 10px;<br/>
  background: #FF9933; color: #000; font-weight: bold; font-size: 1rem; cursor: pointer;
}
.btnSecundario {
  width: 100%; padding: 14px; margin-top: 8px; border: 2px solid #FF9933; border-radius: 10px;<br/>
  background: #FF9933; color: #000; font-weight: bold; font-size: 1rem; cursor: pointer;
}
.btnFechar {
  width: 100%; padding: 10px; margin-top: 8px; border: none; border-radius: 10px;<br/>
  background: #222; color: #ccc; font-size: 0.9rem; cursor: pointer;
}
.btnLink { background: none; border: none; color: #FF9933; cursor: pointer; margin-top: 12px; font-size: 0.9rem; text-decoration: none; }<br/>
.btnAdmin { display: inline-block; margin-top: 12px; color: #666; font-size: 0.8rem; text-decoration: none; }<br/>
header { width: 100%; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#000, #1a1a1a); }<br/>
header h1 { font-size: 1.2rem; }<br/>
.topoAcoes { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #ccc; }<br/>
.grade { width: 100%; max-width: 640px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 20px; }<br/>
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; background: #f2f2f2; border-radius: 12px; padding: 12px;<br/>
  display: flex; flex-direction: column; align-items: center; justify-content: center;<br/>
  min-height: 140px; cursor: pointer;
}
.card img { max-width: 100%; max-height: 120px; object-fit: contain; }<br/>
.marca { color: #888; font-size: 0.7rem; margin-top: 6px; }
.btnRemover {
  position: absolute; top: 6px; right: 6px; background: #000; color: #FF9933;<br/>
  border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 0.9rem;
}
footer { width: 100%; text-align: center; padding: 20px; color: #666; font-size: 0.8rem; }<br/>
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; }<br/>
.modalBox { width: 90%; max-width: 360px; background: #111; border-radius: 16px; padding: 20px; text-align: center; }<br/>
.modalBox img { max-width: 100%; max-height: 260px; background: #f2f2f2; border-radius: 10px; object-fit: contain; }<br/>
.modalBox p { margin: 10px 0; color: #ccc; font-size: 0.8rem; }<br/>
.dica { font-size: 0.75rem !important; color: #888 !important; }<br/>
.uploadBox { width: 100%; max-width: 640px; padding: 20px; text-align: center; }<br/>
.uploadBox input { display: block; margin: 0 auto 12px; color: #fff; }