/* Tema escuro simples, no espirito do map_editor. */
* { box-sizing: border-box; margin: 0; }
body {
  font: 14px/1.5 system-ui, sans-serif;
  background: #14161c;
  color: #e6e8ee;
}
.hidden { display: none !important; }
button {
  background: #4446bc; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font: inherit;
}
button:hover { background: #5658ce; }
button.ghost { background: #262a35; }
input, select {
  background: #1d2029; color: #e6e8ee; border: 1px solid #333846;
  border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%;
}
.error { color: #ff7a7a; min-height: 1.4em; }

.login { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: #1b1e27; padding: 32px; border-radius: 14px; width: 300px;
  display: grid; gap: 12px; text-align: center;
}

.shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.side {
  background: #101218; padding: 20px 14px; display: flex;
  flex-direction: column; gap: 6px;
}
.side h1 { font-size: 18px; margin-bottom: 14px; color: #8f93ff; }
.side a {
  color: #aab; text-decoration: none; padding: 8px 10px; border-radius: 8px;
}
.side a.active, .side a:hover { background: #23273a; color: #fff; }
.logout { margin-top: auto; background: #262a35; }
main { padding: 24px; overflow-x: auto; }

h2 { margin-bottom: 16px; font-size: 18px; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid #262a35;
  white-space: nowrap;
}
th { color: #99a; font-weight: 600; }
tr:hover td { background: #191c25; }
.mono { font-family: ui-monospace, monospace; font-size: 12px; }
.muted { color: #778; }
.pill {
  display: inline-block; background: #23273a; border-radius: 999px;
  padding: 1px 10px; font-size: 12px;
}
.pill.off { background: #3a2330; color: #f8a; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: end; }
.toolbar label { display: grid; gap: 4px; font-size: 12px; color: #99a; }
.toolbar input, .toolbar select { width: auto; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.card { background: #1b1e27; border-radius: 12px; padding: 16px; }
.card .big { font-size: 26px; font-weight: 700; }
.card .label { color: #99a; font-size: 12px; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart { background: #1b1e27; border-radius: 12px; padding: 16px; }
canvas { width: 100%; height: 180px; }

.form-grid { display: grid; gap: 12px; max-width: 420px; margin-bottom: 24px;
  background: #1b1e27; padding: 18px; border-radius: 12px; }
.form-grid label { display: grid; gap: 4px; font-size: 12px; color: #99a; }
.preview { width: 96px; height: 96px; border-radius: 12px; object-fit: contain;
  background: #101218; }
.avatar-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; }
.pager { margin-top: 14px; display: flex; gap: 10px; }