:root {
  --adm-bg:    #f5f3ee;
  --adm-ink:   #1e2a2e;
  --adm-line:  #d6ccb9;
  --adm-card:  #fff;
  --adm-pri:   #1f3a44;
  --adm-warn:  #c94b3b;
  --adm-ok:    #2e8b3a;
  --adm-terra: #c56c3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--adm-bg);
  color: var(--adm-ink);
  min-height: 100vh;
}

/* ─── Login ─── */
#adm-login[hidden], #adm-app[hidden] { display: none; }
#adm-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.adm-login-box {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: 14px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 24px rgba(31,58,68,.12);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.adm-login-box h2 {
  margin: 0 0 .25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--adm-pri);
}

.adm-login-sub {
  margin: 0;
  font-size: .88rem;
  color: #666;
}

.adm-login-box label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--adm-ink);
}

.adm-login-box input {
  width: 100%;
  padding: .65rem .9rem;
  font-size: .95rem;
  border: 1px solid var(--adm-line);
  border-radius: 8px;
  font: inherit;
  margin-top: .3rem;
  display: block;
  transition: border-color .15s;
}

.adm-login-box input:focus {
  outline: none;
  border-color: var(--adm-pri);
  box-shadow: 0 0 0 3px rgba(31,58,68,.15);
}

.adm-login-box button {
  padding: .65rem 1rem;
  background: var(--adm-pri);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s;
}

.adm-login-box button:hover { background: #162d36; }
.adm-login-box button:disabled { opacity: .6; cursor: not-allowed; }

.adm-pw-err {
  color: var(--adm-warn);
  font-size: .85rem;
  margin: 0;
}

/* ─── App shell ─── */
#adm-app { min-height: 100vh; display: flex; flex-direction: column; }

.adm-header {
  background: var(--adm-pri);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.adm-header h1 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
}

.adm-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.adm-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }

.adm-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  transition: background .15s;
}

.adm-tab:hover { background: rgba(255,255,255,0.25); }
.adm-tab.active { background: rgba(255,255,255,0.35); font-weight: 600; }

.badge {
  background: var(--adm-terra);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 4px;
}
.badge:empty { display: none; }

.adm-logout-btn {
  padding: .35rem .8rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  white-space: nowrap;
  transition: background .15s;
}
.adm-logout-btn:hover { background: rgba(255,255,255,.12); }

/* ─── Body ─── */
#adm-body {
  padding: 20px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.adm-card {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.adm-card-title {
  font-weight: 700;
  color: var(--adm-ink);
  margin-bottom: 4px;
}

.adm-card-sub {
  margin: 2px 0 6px;
  font-size: .88rem;
  color: #555;
}

.adm-card-body {
  margin: 6px 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--adm-ink);
}

.adm-meta {
  font-size: .78rem;
  color: #888;
  margin: 2px 0;
}

span.adm-meta { margin-left: .5rem; }

.adm-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.adm-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  transition: opacity .15s;
}
.adm-btn:hover { opacity: .85; }
.adm-btn-ok  { background: var(--adm-ok);   color: #fff; }
.adm-btn-bad { background: var(--adm-warn);  color: #fff; }
.adm-btn-ghost { background: transparent; color: var(--adm-ink); border: 1px solid var(--adm-line); }

.adm-empty {
  color: #888;
  font-style: italic;
  font-size: .9rem;
  padding: 20px;
  text-align: center;
}

/* ─── Photo grid ─── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.photo-grid figure {
  margin: 0;
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: 10px;
  padding: 8px;
  overflow: hidden;
}

.photo-grid img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: #eee;
}

.photo-grid figcaption {
  font-size: .8rem;
  color: #555;
  margin: 6px 0 4px;
  line-height: 1.4;
}

/* ─── [hidden] polyfill ─── */
[hidden] { display: none !important; }

/* ─── Password toggle ─── */
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field input { flex: 1; padding-right: 2.5rem; }
.pw-toggle {
  position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  color: var(--adm-line, #d2c9ae);
  padding: 0.25rem; display: flex; align-items: center;
}
.pw-toggle:hover { color: var(--adm-ink, #1a1d2a); }
.pw-toggle.is-shown { color: var(--adm-terra, #c56c3a); }

/* ─── Locais tab ─── */
.locais-wrap { padding: 1rem; }
.locais-search {
  width: 100%; max-width: 320px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--adm-line); border-radius: 4px;
  margin-bottom: 0.5rem;
}
.locais-count { color: var(--adm-ink); opacity: 0.6; font-size: 0.85rem; margin: 0 0 1rem; }
.locais-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.locais-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--adm-line); color: var(--adm-ink); }
.locais-table td { padding: 0.5rem; border-bottom: 1px solid var(--adm-line); vertical-align: top; }
.locais-table input[type="url"] { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--adm-line); border-radius: 3px; font-size: 0.85rem; }
.col-name { min-width: 180px; }
.col-slug { font-family: monospace; font-size: 0.75rem; color: var(--adm-ink); opacity: 0.5; margin-top: 0.15rem; }
.col-coords { white-space: nowrap; font-family: monospace; font-size: 0.8rem; }
.coord-ok { color: var(--adm-ok); }
.coord-warn { color: var(--adm-terra); font-weight: 600; }
.row-saved { background: rgba(196, 108, 58, 0.08); transition: background 400ms ease; }

/* ─── Tab Locais (consolidado) ─── */
.locais-wrap { padding: 0 .5rem; }
.locais-pending {
  background: #fffbe6; border: 1px solid #f0d66a; border-radius: 6px;
  padding: .75rem 1rem; margin: 0 0 1rem; font-size: .9rem; color: #5a4500;
}
.locais-pending code { background: rgba(0,0,0,.08); padding: .1rem .35rem; border-radius: 3px; }
.locais-toolbar { display: flex; gap: .75rem; align-items: center; margin: 0 0 .5rem; }
.locais-search { flex: 1; padding: .4rem .6rem; border-radius: 6px; border: 1px solid #ccc; }
.locais-filters { display: flex; gap: 1rem; align-items: center; margin: 0 0 1rem; font-size: .85rem; }
.locais-count { margin-left: auto; color: #666; }
.locais-add-form {
  background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 1rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.locais-add-form label { display: flex; flex-direction: column; font-size: .85rem; color: #555; }
.locais-add-form input, .locais-add-form select, .locais-add-form textarea {
  margin-top: .2rem; padding: .4rem .6rem; border-radius: 6px; border: 1px solid #ccc; font: inherit;
}
.locais-add-form .form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.locais-add-form .form-msg { margin: 0; font-size: .85rem; color: #4a7; }
.locais-add-form .form-msg.error { color: #c44; }

.locais-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.locais-table th, .locais-table td { border-bottom: 1px solid #eee; padding: .4rem .5rem; text-align: left; vertical-align: top; }
.locais-table th { background: #fafafa; font-weight: 600; }
.locais-row .col-slug { font-family: monospace; font-size: .75rem; color: #999; }
.locais-row.row-new .col-name { background: #eef6fb; }
.locais-row.row-deleted { opacity: .5; font-style: italic; }
.locais-row.row-saved { background: #e9f7e9 !important; transition: background 1s; }
.locais-row input[type="url"], .locais-row input[type="text"] { width: 100%; padding: .25rem .4rem; border: 1px solid #ddd; border-radius: 4px; font-size: .85rem; }
.col-coords .coord-ok { color: #2a7a2a; font-family: monospace; }
.col-coords .coord-warn { color: #c89; }
.chevron-btn { background: transparent; border: none; font-size: 1.2rem; cursor: pointer; padding: .2rem .5rem; }
.badge-new { background: #3a7fbf; color: #fff; }
.badge-deleted { background: #999; color: #fff; }

.locais-panel td { background: #fcfcfc; padding: 1rem; }
.panel-stats { font-size: .8rem; color: #666; margin-bottom: .5rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.panel-subview { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #ddd; }
.adm-btn-warn { background: #f0a94a; color: #fff; border: none; }

.locais-danger {
  margin-top: 2rem; padding: 1rem; border: 2px solid #d44; border-radius: 8px; background: #fff5f5;
}
.locais-danger h3 { margin: 0 0 .5rem; color: #a33; }
.danger-btn { background: #c44; color: #fff; padding: .5rem 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.danger-btn:hover { background: #a33; }
.state-badge { display: inline-block; padding: .1rem .4rem; border-radius: 3px; font-size: .7rem; font-weight: 600; margin-left: .3rem; }
.state-pendente { background: #f0e0a0; color: #7a5a00; }
.state-aprovado { background: #c7f0c7; color: #2a5a2a; }
.state-descartado { background: #e0e0e0; color: #555; }
.state-resolvido { background: #c7e0f0; color: #2a4a7a; }