/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM — Bebedouros Lisboa
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Light surfaces */
  --bg:       #f6f5f2;
  --surface:  #ffffff;
  --surface2: #f4f4f5;
  --surface3: #e4e4e7;

  /* Sidebar — dark zinc */
  --sb:       #0c0c0e;
  --sb2:      #18181b;
  --sb3:      #27272a;
  --sb-br:    rgba(255,255,255,.06);
  --sb-txt:   #fafafa;
  --sb-txt2:  #a1a1aa;
  --sb-txt3:  #52525b;

  /* Accent */
  --blue:     #3b82f6;
  --blue-d:   #2563eb;
  --blue-dim: #eff6ff;

  /* Status */
  --green:    #22c55e;
  --green-d:  #16a34a;
  --green-bg: #f0fdf4;
  --red:      #ef4444;
  --red-d:    #dc2626;
  --red-bg:   #fef2f2;
  --amber:    #f59e0b;
  --amber-d:  #d97706;
  --amber-bg: #fffbeb;

  /* Text (light bg) */
  --tx:   #09090b;
  --tx2:  #52525b;
  --tx3:  #a1a1aa;

  /* Borders */
  --br:   #e4e4e7;
  --br2:  #d4d4d8;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 8px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --sh-md: 0 8px 24px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.04);
  --sh-lg: 0 24px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);

  /* Radii */
  --r-sm: 4px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-f:  9999px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   MAP PAGE — Fullscreen + Floating UI
   ═══════════════════════════════════════════════════════════ */
body.map-page {
  overflow: hidden;
  height: 100vh;
  background: #f0ede6;
}

#map {
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
}

/* ─── Floating element base ─────────────────────────────── */
.ui-brand,
.ui-controls,
.ui-stats,
.ui-loading {
  position: fixed;
  z-index: 10;
}

/* ─── Brand pill — top left ─────────────────────────────── */
.ui-brand {
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border-radius: var(--r-f);
  padding: 7px 13px 7px 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
  user-select: none;
}

.ui-brand-icon { font-size: 15px; line-height: 1; }

.ui-brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx);
}

.ui-brand-sep {
  width: 1px;
  height: 12px;
  background: var(--br2);
}

.ui-brand-city {
  font-size: 11px;
  color: var(--tx3);
  font-weight: 500;
}

/* ─── Controls — top right ──────────────────────────────── */
.ui-controls {
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ui-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-f);
  border: none;
  background: #fff;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .1s, background .12s;
  white-space: nowrap;
}

.ui-action:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
}

.ui-action:active { transform: scale(.96); }

.ui-action.primary {
  background: #111;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.ui-action.primary:hover { background: #1a1a1a; }

.ui-action.icon-only { width: 36px; padding: 0; }

.ui-action svg { width: 14px; height: 14px; flex-shrink: 0; }

/* add-mode state */
body.add-mode #add-btn {
  background: var(--amber) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(245,158,11,.35) !important;
}

body.add-mode #map { cursor: crosshair; }

/* ─── User avatar + dropdown ────────────────────────────── */
.ui-user { position: relative; }

.ui-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  background: var(--surface2);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  transition: box-shadow .15s;
}

.ui-avatar-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.08);
}

.ui-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ui-avatar-initial {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--tx2);
  line-height: 1;
}

.ui-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  min-width: 210px;
  overflow: hidden;
  animation: dropIn .15s ease;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ui-drop-profile {
  padding: 13px 15px;
  border-bottom: 1px solid var(--br);
}

.ui-drop-profile strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.3;
}

.ui-drop-profile span {
  font-size: 11px;
  color: var(--tx3);
}

.ui-drop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
  text-decoration: none;
  transition: background .1s, color .1s;
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ui-drop-item:hover { background: var(--surface2); color: var(--tx); }
.ui-drop-item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ─── Stats pill — bottom left ──────────────────────────── */
.ui-stats {
  bottom: 24px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--r-f);
  padding: 8px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
}

.ui-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-stat-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
}

.ui-stat-label {
  font-size: 12px;
  color: var(--tx3);
  font-weight: 400;
}

.ui-stat-sep {
  width: 1px;
  height: 14px;
  background: var(--br2);
  flex-shrink: 0;
}

.ui-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ui-dot.ok { background: var(--green); }
.ui-dot.ko { background: var(--red); }

/* ─── Filter bar — bottom center ───────────────────────── */
.filter-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 11;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--tx2);
  transition: background .15s, color .15s;
}
.filter-toggle-btn:hover { background: var(--surface2); color: var(--tx); }
.filter-toggle-btn.active { background: #111; color: #fff; }
.filter-toggle-btn svg { width: 18px; height: 18px; }

.filter-active-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  border: 1.5px solid #fff;
}

.ui-filters {
  position: fixed;
  bottom: 76px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border-radius: 18px;
  padding: 5px 6px;
  box-shadow: 0 2px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .18s, transform .18s;
}
.ui-filters.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.filter-row-sep {
  height: 1px;
  background: var(--br2);
  margin: 4px 2px;
}

.filter-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--tx3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.filter-status:hover { background: var(--surface2); color: var(--tx2); }
.filter-status.active { background: var(--surface2); color: var(--tx); font-weight: 600; }

.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-dot.ok { background: var(--green); }
.filter-dot.ko { background: var(--red); }

.filter-feat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--tx3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.filter-feat:hover { background: var(--surface2); color: var(--tx2); }
.filter-feat.active { background: #111; color: #fff; }
.filter-feat svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ─── Loading indicator ─────────────────────────────────── */
.ui-loading {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: var(--r-f);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx2);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-loading::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--br2);
  border-top-color: var(--blue);
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.ui-noscript {
  position: fixed;
  top: 16px; left: 16px;
  background: #fff;
  border-radius: var(--r-f);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--tx2);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — light background contexts
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
  white-space: nowrap;
  text-align: center;
}

.btn:hover { background: var(--surface2); border-color: var(--br2); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

.btn.primary:hover { background: var(--blue-d); border-color: var(--blue-d); }

.btn.ghost { background: transparent; color: var(--tx2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface2); border-color: var(--br); color: var(--tx); }

.btn.danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn.danger:hover { background: var(--red-d); border-color: var(--red-d); }

.btn.success { background: var(--green); color: #fff; border-color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   OVERLAY / MODALS
   ═══════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9,9,11,.4);
  display: grid;
  place-items: center;
  z-index: 10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
}

.overlay .card {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--r-xl);
  border: 1px solid var(--br);
  width: min(480px, 100%);
  box-shadow: var(--sh-lg);
}

.overlay .card h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.overlay code {
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 12px;
  border: 1px solid var(--br);
}

/* ─── Suggest modal ──────────────────────────────────────── */
.suggest-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border-radius: 28px;
  width: min(540px, 100%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 28px 72px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.75) inset;
  overflow: hidden;
  animation: fadeUp .22s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.suggest-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-bottom: 1px solid rgba(228,228,231,.85);
}

.suggest-top-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suggest-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--tx2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.suggest-title {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tx);
  margin: 0;
}

.suggest-hint {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
}

.suggest-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212,212,216,.75);
  background: rgba(244,244,245,.9);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, transform .12s;
}

.suggest-close:hover {
  background: #fff;
  border-color: var(--br2);
  transform: rotate(90deg);
}

.suggest-close svg { width: 12px; height: 12px; stroke: var(--tx2); }

#add-form,
#edit-form,
#feedback-form {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggest-field textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--br);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--tx);
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.suggest-field textarea:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.suggest-field textarea::placeholder { color: var(--tx3); }
body.dark .suggest-field textarea { background: #27272a; border-color: #3f3f46; color: #fafafa; }
body.dark .suggest-field textarea::placeholder { color: #52525b; }
body.dark .suggest-field textarea:focus { border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
[data-theme="glass"] .suggest-field textarea { background: rgba(255,255,255,0.08); border-color: var(--gbr); color: var(--gtx); }

.suggest-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggest-field label,
.suggest-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 6px;
}

.suggest-optional {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx3);
  background: #f0f1f3;
  padding: 3px 7px;
  border-radius: 999px;
}

.suggest-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--br);
  background: #fff;
  color: var(--tx);
  font-size: 14px;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.suggest-field input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.suggest-field input::placeholder { color: var(--tx3); }

.suggest-panel {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(228,228,231,.95);
  background: linear-gradient(180deg, #fcfcfd 0%, #f7f7f8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.suggest-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suggest-panel-note {
  margin: 6px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx2);
}

.suggest-loc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(212,212,216,.9);
  background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.suggest-loc-card.picked {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  box-shadow: 0 10px 22px rgba(59,130,246,.08);
}

.suggest-loc-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.suggest-loc-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
}

.suggest-loc-text {
  font-size: 14px;
  line-height: 1.35;
  color: var(--tx3);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest-loc-text.picked {
  color: var(--tx);
  font-weight: 600;
}

.suggest-loc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 138px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--br2);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
  color: var(--tx);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.suggest-loc-btn:hover {
  border-color: #c7c7cf;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.suggest-loc-btn svg { width: 13px; height: 13px; }

.suggest-features {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--br);
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: none;
  color: var(--tx2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: background .1s, color .1s;
}

.feature-pill:hover { background: var(--surface2); color: var(--tx); }

.feature-pill-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--br2);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
.feature-pill-box svg { width: 10px; height: 8px; opacity: 0; transition: opacity .1s; stroke: #fff; }

.feature-pill.active { color: var(--tx); }
.feature-pill.active .feature-pill-box {
  background: #111;
  border-color: #111;
}
.feature-pill.active .feature-pill-box svg { opacity: 1; }

.suggest-status-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.suggest-status-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-f);
  border: 1px solid var(--br);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  user-select: none;
}

.suggest-status-opt:has(input:checked) {
  border-color: #111;
  background: #f9f9f9;
  color: var(--tx);
  font-weight: 600;
}

.suggest-status-opt input { display: none; }

.filter-dot.new { background: var(--amber); }

body.dark .suggest-status-opt {
  background: #27272a;
  border-color: #3f3f46;
  color: #a1a1aa;
}

body.dark .suggest-status-opt:has(input:checked) {
  border-color: #fafafa;
  background: #3f3f46;
  color: #fafafa;
}

.suggest-actions {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  padding-top: 4px;
}

.suggest-btn-cancel,
.suggest-btn-submit {
  height: 46px;
  border-radius: 15px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}

.suggest-btn-cancel {
  border: 1px solid var(--br);
  background: rgba(255,255,255,.88);
  color: var(--tx2);
  box-shadow: 0 10px 22px rgba(0,0,0,.03);
}

.suggest-btn-cancel:hover {
  background: #fff;
  border-color: var(--br2);
  transform: translateY(-1px);
}

.suggest-btn-submit {
  border: none;
  background: linear-gradient(180deg, #151515 0%, #09090b 100%);
  color: #fff;
  box-shadow: 0 16px 28px rgba(9,9,11,.22);
}

.suggest-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(9,9,11,.26);
}

.suggest-btn-submit:active,
.suggest-btn-cancel:active {
  transform: scale(.985);
}

/* ─── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--tx);
  color: #fafafa;
  border-radius: var(--r-f);
  box-shadow: var(--sh-md);
  z-index: 20;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: toastIn .2s ease;
}

@keyframes toastIn {
  from { transform: translateX(-50%) translateY(12px); opacity:0; }
  to   { transform: translateX(-50%) translateY(0);    opacity:1; }
}

/* ─── Map info popup — v2 ────────────────────────────────── */
.popup {
  width: min(300px, calc(100vw - 48px));
  font-family: "Inter", system-ui, sans-serif;
  background: #fff;
  color: var(--tx);
  border-radius: 16px;
  overflow: hidden;
}

.popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
}

.popup-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--tx);
  word-break: break-word;
  flex: 1;
}

.popup-close {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--surface2);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .12s;
  margin-top: 1px;
}
.popup-close:hover { background: var(--br2); }
.popup-close svg { width: 9px; height: 9px; stroke: var(--tx2); }

.popup-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Status badge — dashboard tag style */
.popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.popup-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.popup-badge.ok  { background: #dcfce7; color: #16a34a; }
.popup-badge.ko  { background: #fee2e2; color: #dc2626; }
.popup-badge.new { background: #fef9c3; color: #854d0e; }

.popup-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.popup-suggested-by {
  display: block;
  font-size: 11px;
  color: var(--tx3);
  margin-top: 4px;
}

.popup-verified {
  font-size: 10.5px;
  color: var(--tx3);
  font-weight: 500;
  white-space: nowrap;
}

/* Feature chips */
.popup-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.popup-feature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--surface2);
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
}
.popup-feature svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }

/* Report panel */
.popup-report-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
.popup-report-panel.open { max-height: 40px; }

/* Footer */
.popup-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--br);
}

.popup-dots {
  height: 32px;
  padding: 0 10px;
  background: var(--surface2);
  border: 1px solid var(--br);
  border-radius: 8px;
  color: var(--tx2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.popup-dots:hover,
.popup-dots.active { background: var(--br2); border-color: var(--tx3); }

.popup-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--br);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--tx2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.popup-btn.ok:hover  { background: var(--green-bg); color: var(--green-d); border-color: #bbf7d0; }
.popup-btn.ko:hover  { background: var(--red-bg);   color: var(--red-d);   border-color: #fecaca; }
.popup-btn.edit      { background: transparent; color: var(--tx2); border-color: var(--br); }
.popup-btn.edit:hover { background: var(--surface2); color: var(--tx); }
.popup-btn.route {
  flex: 1;
  background: #111;
  color: #fff;
  border-color: #111;
  font-weight: 700;
}
.popup-btn.route:hover { background: #333; border-color: #333; }

/* GM popup override — remove default chrome, keep our design */
.gm-style .gm-style-iw-c {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05) !important;
  padding: 0 !important;
  border: none !important;
  max-width: calc(100vw - 32px) !important;
}
.gm-style .gm-style-iw       { background: #fff !important; box-shadow: none !important; border-radius: 14px !important; padding: 0 !important; }
.gm-style .gm-style-iw-d     { overflow: visible !important; padding: 0 !important; }
.gm-style .gm-style-iw-t::after { display: none !important; }
.gm-style .gm-style-iw-t::before { display: none !important; }
.gm-style .gm-style-iw-chr   { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  background: #f0ede6;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-brand-icon { font-size: 22px; line-height: 1; }

.login-brand-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx);
  line-height: 1.2;
}

.login-brand-city {
  display: block;
  font-size: 11px;
  color: var(--tx3);
  font-weight: 500;
}

.login-text h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.15;
  color: var(--tx);
  margin-bottom: 6px;
}

.login-text p {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.5;
}

.login-error {
  background: var(--red-bg);
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.login-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--br2);
  border-radius: var(--r-f);
  background: var(--surface);
  color: var(--tx);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s, box-shadow .12s, transform .1s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.login-google-btn:hover {
  background: var(--surface2);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.login-google-btn:active { transform: scale(.98); }

.login-note {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.6;
  text-align: center;
}

.login-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #a8a09a;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN PAGES
   ═══════════════════════════════════════════════════════════ */
.admin-page {
  background: #f0ede6;
  min-height: 100vh;
  font-family: "Inter", system-ui, sans-serif;
}

/* ─── Header ─────────────────────────────────────────────── */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  gap: 16px;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--tx);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

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

.admin-nav-link {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx3);
  text-decoration: none;
  border-radius: var(--r);
  transition: background .12s, color .12s;
}

.admin-nav-link:hover { background: var(--surface2); color: var(--tx); }
.admin-nav-link.active { background: var(--surface2); color: var(--tx); font-weight: 600; }

.admin-header-end {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.admin-header-btn {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
  text-decoration: none;
  border-radius: var(--r);
  transition: background .12s, color .12s;
}

.admin-header-btn:hover { background: var(--surface2); color: var(--tx); }

/* ─── Hero title area ────────────────────────────────────── */
.admin-hero {
  padding: 32px 28px 0;
}

.admin-hero h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tx);
  margin-bottom: 4px;
  line-height: 1.1;
}

.admin-hero p {
  font-size: 13px;
  color: var(--tx2);
}

/* ─── Main layout ────────────────────────────────────────── */
.admin-main {
  padding: 20px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── Stats ──────────────────────────────────────────────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.admin-stat {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-stat-num {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--tx);
  line-height: 1;
}

.admin-stat-num.ok { color: var(--green-d); }
.admin-stat-num.ko { color: var(--red-d); }

.admin-stat-label {
  font-size: 12px;
  color: var(--tx2);
  font-weight: 500;
}

/* ─── Card ───────────────────────────────────────────────── */
.admin-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  gap: 12px;
}

.admin-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx);
  margin: 0;
}

.admin-card-sub {
  font-size: 12px;
  color: var(--tx2);
  margin: 2px 0 0;
}

/* Badge */
.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--r-f);
  background: var(--surface2);
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
}

/* ─── Admin buttons ──────────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.admin-btn.primary { background: var(--tx); color: #fff; border-color: var(--tx); }
.admin-btn.primary:hover { background: #1a1a1a; }
.admin-btn.ghost { background: transparent; color: var(--tx2); border-color: var(--br2); }
.admin-btn.ghost:hover { background: var(--surface2); color: var(--tx); }
.admin-btn.small { height: 28px; padding: 0 10px; font-size: 11px; }

/* ─── Status pill ────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-f);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-pill.ok  { background: var(--green-bg); color: var(--green-d); }
.status-pill.ko  { background: var(--red-bg);   color: var(--red-d); }
.status-pill.new { background: var(--amber-bg); color: var(--amber-d); }

/* ─── Reports list ───────────────────────────────────────── */
.reports-list { display: grid; }

.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .1s;
}

.report-row:last-child { border-bottom: none; }
.report-row:hover { background: #faf9f7; }

.report-row-info { min-width: 0; flex: 1; }

.report-row-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-row-meta {
  font-size: 11px;
  color: var(--tx2);
}

/* ─── Pending grid ───────────────────────────────────────── */
.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 18px 20px;
}

.pending-card {
  border-radius: var(--r-md);
  background: #faf9f7;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .15s;
}

.pending-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.pending-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.pending-img-empty {
  width: 100%;
  height: 100px;
  background: var(--surface2);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--tx3);
}

.pending-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pending-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin: 0;
}

.pending-meta {
  font-size: 11px;
  color: var(--tx2);
  margin: 0;
}

.pending-note {
  font-size: 12px;
  color: var(--tx2);
  font-style: italic;
  margin: 0;
}

.pending-map-link {
  font-size: 12px;
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}

.pending-map-link:hover { text-decoration: underline; }

.pending-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

/* ─── Edit modal delete zone ─────────────────────────────── */
.edit-delete-zone {
  border-top: 1px solid var(--br);
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-delete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--br);
  border-radius: var(--r);
  color: var(--tx3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  cursor: pointer;
  align-self: flex-start;
  transition: border-color .12s, color .12s, background .12s;
}

.edit-delete-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
.edit-delete-toggle:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.edit-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-delete-warning {
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.5;
}

.edit-delete-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  font-family: inherit;
  font-size: 13px;
  color: var(--tx);
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}

.edit-delete-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.edit-delete-btn {
  height: 40px;
  border-radius: var(--r);
  border: none;
  background: var(--red);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}

.edit-delete-btn:disabled { opacity: .35; cursor: not-allowed; }
.edit-delete-btn:not(:disabled):hover { background: var(--red-d); }

body.dark .edit-delete-zone     { border-top-color: #3f3f46; }
body.dark .edit-delete-toggle   { border-color: #3f3f46; color: #71717a; }
body.dark .edit-delete-toggle:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,.1); }
body.dark .edit-delete-warning  { color: #71717a; }
body.dark .edit-delete-input    { background: #27272a; border-color: #3f3f46; color: #fafafa; }
body.dark .edit-delete-input:focus { border-color: var(--red); }

/* ─── Graphs list ────────────────────────────────────────── */
.graphs-list { display: grid; }

.graph-row {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.graph-row:last-child { border-bottom: none; }

.graph-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.graph-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}

.graph-row-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.graph-bar-wrap { display: flex; flex-direction: column; gap: 5px; }

.graph-bar {
  height: 6px;
  background: #fca5a5;
  border-radius: var(--r-f);
  overflow: hidden;
}

.graph-bar-ok {
  height: 100%;
  background: #86efac;
  border-radius: var(--r-f);
  transition: width .3s ease;
  min-width: 2px;
}

.graph-bar-labels {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--tx2);
}

.ok-label { color: var(--green-d); font-weight: 600; }
.ko-label { color: var(--red-d); font-weight: 600; }
.date-label { margin-left: auto; color: var(--tx3); }

/* ─── Empty state ────────────────────────────────────────── */
.admin-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--tx3);
}

.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════════ */
body.dark { color-scheme: dark; }

body.dark.map-page { background: #16161a; }

/* ══════════════════════════════════════════
   GLASS THEME — Liquid Glass (visionOS)
   ══════════════════════════════════════════ */
[data-theme="glass"] {
  color-scheme: normal;
  --gb:   rgba(20,20,28,0.52);
  --gbr:  rgba(255,255,255,0.18);
  --ghi:  inset 0 1.5px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.06);
  --gsh:  0 8px 40px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06);
  --gbl:  blur(32px) saturate(220%) brightness(1.05);
  --gtx:  #ffffff;
  --gtx2: rgba(255,255,255,0.75);
  --gtx3: rgba(255,255,255,0.4);
  --gsep: rgba(255,255,255,0.09);
}

/* mixin shorthand — aplica glass a todos os elementos flutuantes */
[data-theme="glass"] .ui-brand,
[data-theme="glass"] .ui-stats,
[data-theme="glass"] .ui-action,
[data-theme="glass"] .ui-avatar-btn,
[data-theme="glass"] .filter-toggle-btn,
[data-theme="glass"] .ui-filters,
[data-theme="glass"] .popup,
[data-theme="glass"] .suggest-card,
[data-theme="glass"] .list-panel,
[data-theme="glass"] .settings-panel,
[data-theme="glass"] .ob-card,
[data-theme="glass"] .ui-dropdown,
[data-theme="glass"] .overlay > .card {
  background: var(--gb) !important;
  backdrop-filter: var(--gbl) !important;
  -webkit-backdrop-filter: var(--gbl) !important;
  border: 1px solid var(--gbr) !important;
  box-shadow: var(--gsh), var(--ghi) !important;
  color: var(--gtx) !important;
}

/* ── Brand ── */
[data-theme="glass"] .ui-brand-name          { color: var(--gtx); }
[data-theme="glass"] .ui-brand-city          { color: var(--gtx3); }
[data-theme="glass"] .ui-brand-sep           { background: var(--gsep); }
[data-theme="glass"] .ui-brand-icon          { filter: brightness(2); }

/* ── Stats ── */
[data-theme="glass"] .ui-stat-num            { color: var(--gtx); }
[data-theme="glass"] .ui-stat-label          { color: var(--gtx3); }
[data-theme="glass"] .ui-stat-sep            { background: var(--gsep); }

/* ── Controlos ── */
[data-theme="glass"] .ui-action              { color: var(--gtx2); }
[data-theme="glass"] .ui-action:hover        { background: rgba(255,255,255,0.1); color: var(--gtx); }
[data-theme="glass"] .ui-action.primary      { background: rgba(255,255,255,0.9); color: #111; border-color: rgba(255,255,255,0.5); }
[data-theme="glass"] .ui-action.primary:hover{ background: #fff; }
[data-theme="glass"] .ui-avatar-initial      { color: var(--gtx2); }

/* ── Dropdown ── */
[data-theme="glass"] .ui-dropdown            { background: rgba(28,28,32,0.82); }
[data-theme="glass"] .ui-drop-profile        { border-bottom-color: var(--gsep); }
[data-theme="glass"] .ui-drop-profile strong { color: var(--gtx); }
[data-theme="glass"] .ui-drop-profile span   { color: var(--gtx3); }
[data-theme="glass"] .ui-drop-item           { color: var(--gtx2); }
[data-theme="glass"] .ui-drop-item:hover     { background: rgba(255,255,255,0.08); color: var(--gtx); }

/* ── Filtros ── */
[data-theme="glass"] .filter-toggle-btn      { color: var(--gtx2); }
[data-theme="glass"] .filter-toggle-btn:hover{ background: rgba(255,255,255,0.1); color: var(--gtx); }
[data-theme="glass"] .filter-toggle-btn.active{ background: rgba(255,255,255,0.9); color: #111; border-color: transparent; box-shadow: var(--gsh); }
[data-theme="glass"] .filter-status          { color: var(--gtx2); }
[data-theme="glass"] .filter-status:hover    { background: rgba(255,255,255,0.08); color: var(--gtx); }
[data-theme="glass"] .filter-status.active   { background: rgba(255,255,255,0.15); color: var(--gtx); font-weight: 600; }
[data-theme="glass"] .filter-row-sep         { background: var(--gsep); }
[data-theme="glass"] .filter-feat            { color: var(--gtx2); }
[data-theme="glass"] .filter-feat:hover      { background: rgba(255,255,255,0.08); color: var(--gtx); }
[data-theme="glass"] .filter-feat.active     { background: rgba(255,255,255,0.9); color: #111; }

/* ── Popup ── */
[data-theme="glass"] .popup-name             { color: var(--gtx); }
[data-theme="glass"] .popup-verified         { color: var(--gtx3); }
[data-theme="glass"] .popup-suggested-by    { color: var(--gtx3); }
[data-theme="glass"] .popup-close            { background: rgba(255,255,255,0.1); }
[data-theme="glass"] .popup-close svg        { stroke: var(--gtx2); }
[data-theme="glass"] .popup-footer           { border-top-color: var(--gsep); }
[data-theme="glass"] .popup-dots             { background: rgba(255,255,255,0.1); border-color: var(--gbr); color: var(--gtx2); }
[data-theme="glass"] .popup-dots:hover       { background: rgba(255,255,255,0.18); }
[data-theme="glass"] .popup-btn              { background: rgba(255,255,255,0.1); border-color: var(--gbr); color: var(--gtx2); }
[data-theme="glass"] .popup-btn:hover        { background: rgba(255,255,255,0.18); color: var(--gtx); }
[data-theme="glass"] .popup-btn.route        { background: rgba(255,255,255,0.9); color: #111; border-color: transparent; }
[data-theme="glass"] .popup-btn.route:hover  { background: #fff; }
[data-theme="glass"] .popup-feature          { background: rgba(255,255,255,0.1); color: var(--gtx2); }
[data-theme="glass"] .gm-style .gm-style-iw-c {
  background: rgba(28,28,32,0.62) !important;
  backdrop-filter: var(--gbl) !important;
  -webkit-backdrop-filter: var(--gbl) !important;
  border: 1px solid var(--gbr) !important;
}
[data-theme="glass"] .gm-style .gm-style-iw  { background: transparent !important; }

/* ── Suggest modal ── */
[data-theme="glass"] .suggest-title           { color: var(--gtx); }
[data-theme="glass"] .suggest-hint            { color: var(--gtx3); }
[data-theme="glass"] .suggest-top            { background: rgba(255,255,255,0.06); border-bottom-color: var(--gsep); }
[data-theme="glass"] .suggest-close          { background: rgba(255,255,255,0.1); }
[data-theme="glass"] .suggest-field label    { color: var(--gtx2); }
[data-theme="glass"] .suggest-field input    { background: rgba(255,255,255,0.08); border-color: var(--gbr); color: var(--gtx); }
[data-theme="glass"] .suggest-field input::placeholder { color: var(--gtx3); }
[data-theme="glass"] .suggest-field input:focus { border-color: rgba(255,255,255,0.4); }
[data-theme="glass"] .suggest-optional       { background: rgba(255,255,255,0.1); color: var(--gtx3); }
[data-theme="glass"] .suggest-features       { border-color: var(--gbr); background: var(--gbr); }
[data-theme="glass"] .feature-pill           { background: rgba(28,28,32,0.62); color: var(--gtx2); }
[data-theme="glass"] .feature-pill:hover     { background: rgba(255,255,255,0.1); color: var(--gtx); }
[data-theme="glass"] .feature-pill-box       { background: rgba(255,255,255,0.08); border-color: var(--gbr); }
[data-theme="glass"] .feature-pill.active    { color: var(--gtx); }
[data-theme="glass"] .feature-pill.active .feature-pill-box { background: rgba(255,255,255,0.9); border-color: transparent; }
[data-theme="glass"] .feature-pill.active .feature-pill-box svg { stroke: #111; }
[data-theme="glass"] .suggest-loc            { background: rgba(255,255,255,0.08); border-color: var(--gbr); }
[data-theme="glass"] .suggest-loc-text       { color: var(--gtx3); }
[data-theme="glass"] .suggest-loc-btn        { background: rgba(255,255,255,0.12); border-color: var(--gbr); color: var(--gtx); }
[data-theme="glass"] .suggest-btn-cancel     { border-color: var(--gbr); color: var(--gtx2); }
[data-theme="glass"] .suggest-btn-cancel:hover { background: rgba(255,255,255,0.08); }
[data-theme="glass"] .suggest-btn-submit     { background: rgba(255,255,255,0.9); color: #111; }
[data-theme="glass"] .suggest-btn-submit:hover { background: #fff; }
[data-theme="glass"] .suggest-status-opt     { background: rgba(255,255,255,0.08); border-color: var(--gbr); color: var(--gtx2); }
[data-theme="glass"] .suggest-status-opt:has(input:checked) { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); color: var(--gtx); }

/* ── Lista ── */
[data-theme="glass"] .list-panel             { border-right-color: var(--gbr); }
[data-theme="glass"] .list-title             { color: var(--gtx); }
[data-theme="glass"] .list-count             { background: rgba(255,255,255,0.1); color: var(--gtx3); }
[data-theme="glass"] .list-header            { border-bottom-color: var(--gsep); }
[data-theme="glass"] .list-item              { border-bottom-color: var(--gsep); }
[data-theme="glass"] .list-item:hover        { background: rgba(255,255,255,0.07); }
[data-theme="glass"] .list-item-name         { color: var(--gtx); }
[data-theme="glass"] .list-item-meta         { color: var(--gtx3); }
[data-theme="glass"] .list-item-dist         { color: var(--gtx2); }
[data-theme="glass"] .list-item-arrow        { color: var(--gtx3); }
[data-theme="glass"] .list-close             { background: rgba(255,255,255,0.1); color: var(--gtx2); }
[data-theme="glass"] .list-close:hover       { background: rgba(255,255,255,0.18); }
[data-theme="glass"] .list-sort-btn          { border-color: var(--gbr); color: var(--gtx2); }
[data-theme="glass"] .list-sort-btn:hover    { background: rgba(255,255,255,0.08); }
[data-theme="glass"] .list-sort-btn.active   { background: rgba(255,255,255,0.9); color: #111; border-color: transparent; }

/* ── Onboarding ── */
[data-theme="glass"] .ob-title               { color: var(--gtx); }
[data-theme="glass"] .ob-sub                 { color: var(--gtx3); }
[data-theme="glass"] .ob-list li             { color: var(--gtx2); }
[data-theme="glass"] .ob-list li strong      { color: var(--gtx); }
[data-theme="glass"] .ob-list-icon           { background: rgba(255,255,255,0.1); color: var(--gtx2); }
[data-theme="glass"] .ob-btn                 { background: rgba(255,255,255,0.9); color: #111; }
[data-theme="glass"] .ob-btn:hover           { background: #fff; }

/* ── Overlay ── */
[data-theme="glass"] .overlay                { background: rgba(0,0,0,0.6); }
[data-theme="glass"] .overlay > .card        { }

/* ── Toast ── */
[data-theme="glass"] .toast                  { background: rgba(28,28,32,0.82); backdrop-filter: var(--gbl); -webkit-backdrop-filter: var(--gbl); border: 1px solid var(--gbr); color: var(--gtx); }

/* Floating UI pills */
body.dark .ui-brand,
body.dark .ui-stats {
  background: #1c1c1f;
  box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
body.dark .ui-brand-name { color: #fafafa; }
body.dark .ui-brand-city,
body.dark .ui-stat-label { color: #71717a; }
body.dark .ui-brand-sep,
body.dark .ui-stat-sep   { background: #3f3f46; }
body.dark .ui-stat-num   { color: #fafafa; }

/* Control buttons */
body.dark .ui-action {
  background: #1c1c1f;
  color: #fafafa;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}
body.dark .ui-action:hover { background: #27272a; }
body.dark .ui-action.primary { background: #fafafa; color: #09090b; }
body.dark .ui-action.primary:hover { background: #e4e4e7; }

/* Avatar */
body.dark .ui-avatar-btn {
  background: #27272a;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}
body.dark .ui-avatar-initial { color: #a1a1aa; }

/* Dropdown */
body.dark .ui-dropdown {
  background: #1c1c1f;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
body.dark .ui-drop-profile { border-bottom-color: #3f3f46; }
body.dark .ui-drop-profile strong { color: #fafafa; }
body.dark .ui-drop-profile span   { color: #71717a; }
body.dark .ui-drop-item           { color: #a1a1aa; }
body.dark .ui-drop-item:hover     { background: #27272a; color: #fafafa; }

/* Filter bar */
body.dark .filter-toggle-btn { background: #1c1c1f; color: #a1a1aa; box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
body.dark .filter-toggle-btn:hover { background: #27272a; color: #fafafa; }
body.dark .filter-toggle-btn.active { background: #fafafa; color: #09090b; }
body.dark .filter-active-dot { border-color: #1c1c1f; }
body.dark .ui-filters {
  background: #1c1c1f;
  box-shadow: 0 2px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
body.dark .filter-status        { color: #71717a; }
body.dark .filter-status:hover  { background: #27272a; color: #a1a1aa; }
body.dark .filter-status.active { background: #27272a; color: #fafafa; }
body.dark .filter-row-sep       { background: #3f3f46; }
body.dark .filter-feat          { color: #71717a; }
body.dark .filter-feat:hover    { background: #27272a; color: #a1a1aa; }
body.dark .filter-feat.active   { background: #fafafa; color: #09090b; }

/* Popup */
body.dark .popup                   { background: #1c1c1f; color: #fafafa; }
body.dark .popup-name              { color: #fafafa; }
body.dark .popup-close             { background: #27272a; }
body.dark .popup-close svg         { stroke: #a1a1aa; }
body.dark .popup-footer            { border-top-color: #3f3f46; }
body.dark .popup-dots              { background: #27272a; border-color: #3f3f46; color: #a1a1aa; }
body.dark .popup-dots:hover,
body.dark .popup-dots.active       { background: #3f3f46; border-color: #52525b; }
body.dark .popup-btn               { background: #27272a; border-color: #3f3f46; color: #a1a1aa; }
body.dark .popup-btn.route         { background: #fafafa; color: #09090b; border-color: #fafafa; }
body.dark .popup-btn.route:hover   { background: #e4e4e7; border-color: #e4e4e7; }
body.dark .popup-feature           { background: #27272a; color: #a1a1aa; }
body.dark .popup-verified          { color: #52525b; }
body.dark .popup-suggested-by      { color: #52525b; }
body.dark .gm-style .gm-style-iw-c { background: #1c1c1f !important; }
body.dark .gm-style .gm-style-iw   { background: #1c1c1f !important; }

/* Suggest modal */
body.dark .suggest-card            { background: #1c1c1f; }
body.dark .suggest-title           { color: #fafafa; }
body.dark .suggest-hint            { color: #71717a; }
body.dark .suggest-close           { background: #27272a; }
body.dark .suggest-field label     { color: #a1a1aa; }
body.dark .suggest-field input     { background: #27272a; border-color: #3f3f46; color: #fafafa; }
body.dark .suggest-field input::placeholder { color: #52525b; }
body.dark .suggest-field input:focus { border-color: #a1a1aa; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
body.dark .suggest-loc             { background: #27272a; border-color: #3f3f46; }
body.dark .suggest-loc-text        { color: #71717a; }
body.dark .suggest-loc-btn         { background: #3f3f46; border-color: #52525b; color: #fafafa; }
body.dark .suggest-btn-cancel      { border-color: #3f3f46; color: #a1a1aa; }
body.dark .suggest-btn-cancel:hover { background: #27272a; }
body.dark .suggest-btn-submit      { background: #fafafa; color: #09090b; }
body.dark .suggest-btn-submit:hover { background: #e4e4e7; }
body.dark .suggest-top             { background: linear-gradient(180deg, #1c1c1f 0%, #18181b 100%); border-bottom-color: #3f3f46; }
body.dark .suggest-optional        { background: #27272a; color: #71717a; }
body.dark .suggest-features        { border-color: #3f3f46; background: #3f3f46; }
body.dark .feature-pill            { background: #1c1c1f; color: #a1a1aa; }
body.dark .feature-pill:hover      { background: #27272a; color: #fafafa; }
body.dark .feature-pill-box        { background: #27272a; border-color: #52525b; }
body.dark .feature-pill.active     { color: #fafafa; }
body.dark .feature-pill.active .feature-pill-box { background: #fafafa; border-color: #fafafa; }
body.dark .feature-pill.active .feature-pill-box svg { stroke: #09090b; }

/* Overlay backdrop */
body.dark .overlay { background: rgba(0,0,0,.6); }
.form-success { animation: pop .3s ease; }
@keyframes pop { 0%{transform:scale(.98)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

/* ─── Lista ──────────────────────────────────────────────── */
.list-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
  transform: translateX(0);
  transition: transform .25s ease;
}
.list-panel.hidden {
  transform: translateX(-100%);
  pointer-events: none;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--br2);
  flex-shrink: 0;
  gap: 10px;
}
.list-header-left  { display: flex; align-items: center; gap: 8px; }
.list-header-right { display: flex; align-items: center; gap: 6px; }

.list-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.02em;
}
.list-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--tx3);
  background: var(--surface2);
  border-radius: 999px;
  padding: 2px 8px;
}

.list-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--br2);
  background: transparent;
  color: var(--tx2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.list-sort-btn:hover { background: var(--surface2); }
.list-sort-btn svg   { width: 13px; height: 13px; flex-shrink: 0; }
.list-sort-btn.active { background: #111; color: #fff; border-color: #111; }

.list-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--tx2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s;
}
.list-close:hover { background: var(--br2); }
.list-close svg { width: 10px; height: 10px; }

.list-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--br2);
  cursor: pointer;
  transition: background .1s;
}
.list-item:hover { background: var(--surface2); }
.list-item:last-child { border-bottom: none; }

.list-item-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.list-item-dot.ok  { background: var(--green); }
.list-item-dot.ko  { background: var(--red); }
.list-item-dot.new { background: var(--amber); }

.list-item-info { flex: 1; min-width: 0; }
.list-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.list-item-meta {
  font-size: 11.5px;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-item-dist {
  font-weight: 500;
  color: var(--tx2);
}

.list-item-arrow {
  color: var(--tx3);
  flex-shrink: 0;
}
.list-item-arrow svg { width: 14px; height: 14px; }

.list-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--tx3);
  font-size: 13.5px;
}

body.dark .list-panel        { background: #18181b; }
body.dark .list-header       { border-bottom-color: #3f3f46; }
body.dark .list-title       { color: #fafafa; }
body.dark .list-count       { background: #27272a; color: #71717a; }
body.dark .list-sort-btn    { border-color: #3f3f46; color: #a1a1aa; }
body.dark .list-sort-btn:hover { background: #27272a; }
body.dark .list-sort-btn.active { background: #fafafa; color: #09090b; border-color: #fafafa; }
body.dark .list-close       { background: #27272a; color: #a1a1aa; }
body.dark .list-close:hover { background: #3f3f46; }
body.dark .list-item        { border-bottom-color: #27272a; }
body.dark .list-item:hover  { background: #27272a; }
body.dark .list-item-name   { color: #fafafa; }
body.dark .list-item-dist   { color: #a1a1aa; }
body.dark .list-item-arrow  { color: #52525b; }

/* ─── Onboarding ─────────────────────────────────────────── */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease;
}
.ob-overlay.hidden { display: none; }

.ob-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  animation: slideUp .3s ease;
}

.ob-icon { font-size: 32px; margin-bottom: 10px; }

.ob-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tx);
  margin: 0 0 4px;
}

.ob-sub {
  font-size: 13.5px;
  color: var(--tx3);
  margin: 0 0 20px;
  line-height: 1.45;
}

.ob-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ob-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.45;
}

.ob-list li strong { color: var(--tx); }

.ob-list-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--tx2);
}

.ob-list-icon svg { width: 16px; height: 16px; }

.ob-btn {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ob-btn:hover { background: #333; }

body.dark .ob-card          { background: #1c1c1f; }
body.dark .ob-title         { color: #fafafa; }
body.dark .ob-sub           { color: #71717a; }
body.dark .ob-list li       { color: #a1a1aa; }
body.dark .ob-list li strong { color: #fafafa; }
body.dark .ob-list-icon     { background: #27272a; color: #71717a; }
body.dark .ob-btn           { background: #fafafa; color: #09090b; }
body.dark .ob-btn:hover     { background: #e4e4e7; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Misc ───────────────────────────────────────────────── */
.switch { font-size:13px; color:var(--tx2); }
.link-btn { border:0; background:none; color:var(--blue); font-weight:600; font-family:inherit; font-size:inherit; cursor:pointer; padding:0; }
.link-btn:hover { text-decoration:underline; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Map page ─────────────────────────────────────── */

  /* Shrink brand pill */
  .ui-brand      { top: 12px; left: 12px; padding: 6px 10px 6px 9px; }
  .ui-brand-sep,
  .ui-brand-city { display: none; }

  /* Collapse "Sugerir" to icon-only */
  #add-btn span  { display: none; }
  #add-btn       { width: 36px; padding: 0; }
  .ui-controls   { top: 12px; right: 12px; gap: 5px; }

  /* Stats: tighter, hide labels */
  .ui-stats       { bottom: 16px; left: 12px; gap: 8px; padding: 6px 11px; }
  .ui-stat-label  { display: none; }

  /* Filter bar */
  .filter-toggle-btn { bottom: 16px; right: 12px; width: 38px; height: 38px; }
  .ui-filters        { bottom: 64px; right: 12px; padding: 4px 5px; }
  .filter-status     { height: 26px; padding: 0 8px; font-size: 11px; }
  .filter-feat       { height: 26px; padding: 0 8px; font-size: 11px; }
  .filter-feat svg   { width: 13px; height: 13px; }

  /* Toast: move up so it clears the stats pill */
  .toast {
    bottom: 72px;
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
    line-height: 1.4;
  }

  /* Suggest modal: scrollable on short screens */
  .suggest-card {
    max-height: calc(100vh - 40px);
    max-height: calc(100svh - 40px);
    overflow-y: auto;
    border-radius: 22px;
  }
  .suggest-top { padding: 20px 18px 16px; }
  .suggest-title { font-size: 26px; }
  #add-form { padding: 18px; gap: 14px; }
  .suggest-panel { padding: 14px; border-radius: 18px; }
  .suggest-loc-card { flex-direction: column; align-items: stretch; }
  .suggest-loc-btn { width: 100%; min-width: 0; justify-content: center; }
  .suggest-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suggest-actions { grid-template-columns: 1fr; }

  /* Popup: bigger touch targets */
  .popup-btn  { height: 36px; }
  .popup-dots { padding: 5px 12px 6px; }

  /* ── Login ─────────────────────────────────────────── */
  .login-page   { padding: 16px; }
  .login-footer { display: none; }

  /* ── Admin header — two rows ───────────────────────── */
  .admin-header {
    height: auto;
    flex-wrap: wrap;
    padding: 0 16px;
    gap: 0;
  }
  /* Row 1: brand (left) + Mapa/Sair (right) */
  .admin-brand      { order: 1; flex: 1; height: 48px; }
  .admin-header-end { order: 2; height: 48px; }
  /* Row 2: scrollable nav */
  .admin-nav {
    order: 3;
    flex: none;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    gap: 2px;
    border-top: 1px solid rgba(0,0,0,.05);
  }
  .admin-nav::-webkit-scrollbar { display: none; }

  /* ── Admin hero + layout ───────────────────────────── */
  .admin-hero    { padding: 20px 16px 0; }
  .admin-hero h1 { font-size: 22px; }
  .admin-main    { padding: 14px 16px 40px; }

  /* ── Admin stats ───────────────────────────────────── */
  .admin-stats    { gap: 8px; }
  .admin-stat     { padding: 12px 10px; }
  .admin-stat-num { font-size: 26px; }

  /* ── Card header ───────────────────────────────────── */
  .admin-card-header { padding: 13px 16px; }

  /* ── Report rows: stack on mobile ──────────────────── */
  .report-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }
  .report-row-info   { width: 100%; }
  .report-row-name   { white-space: normal; }
  /* Pill + button fill the row */
  .report-row > .status-pill { align-self: flex-start; }
  .report-row > .admin-btn   { width: 100%; height: 36px; justify-content: center; }

  /* ── Graph rows: wrap actions below name ───────────── */
  .graph-row         { padding: 14px 16px; }
  .graph-row-header  { flex-wrap: wrap; gap: 8px; }
  .graph-row-name    { flex: 1 1 100%; }
  .graph-row-actions { width: 100%; justify-content: flex-end; }
  .graph-row-actions .admin-btn { height: 34px; }

  /* ── Pending grid: single column ───────────────────── */
  .pending-grid { grid-template-columns: 1fr; padding: 14px 16px; }

  /* ── General touch-friendlier admin buttons ────────── */
  .admin-btn { min-height: 36px; }
}

/* =================================================================
   DARK THEME - Changelog page
   ================================================================= */
body.dark .cl-back        { color: #71717a; }
body.dark .cl-back:hover  { color: #fafafa; }

body.dark .cl-title       { color: #fafafa; }
body.dark .cl-version-badge { color: #71717a; background: #27272a; }

body.dark .cl-publish-check { background: #27272a; border: 1px solid #3f3f46; }

body.dark .cl-ver         { background: #27272a; border-color: #3f3f46; color: #fafafa; }
body.dark .cl-ver.current { background: #fafafa; color: #09090b; border-color: #fafafa; }
body.dark .cl-date        { color: #71717a; }

body.dark .cl-card        { background: #1c1c1f; border-color: #3f3f46; }
body.dark .cl-item        { border-bottom-color: #3f3f46; }
body.dark .cl-item-text   { color: #e4e4e7; }
body.dark .cl-item-tag    { color: #71717a; }

/* =================================================================
   DARK THEME - Admin pages
   ================================================================= */
body.dark.admin-page         { background: #16161a; }

body.dark .admin-header      { background: #111; border-bottom-color: rgba(255,255,255,.06); }
body.dark .admin-brand       { color: #fafafa; }
body.dark .admin-nav-link    { color: #71717a; }
body.dark .admin-nav-link:hover  { background: #27272a; color: #fafafa; }
body.dark .admin-nav-link.active { background: #27272a; color: #fafafa; }
body.dark .admin-header-btn  { color: #a1a1aa; }
body.dark .admin-header-btn:hover { background: #27272a; color: #fafafa; }

body.dark .admin-hero h1     { color: #fafafa; }
body.dark .admin-hero p      { color: #71717a; }

body.dark .admin-stat        { background: #1c1c1f; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body.dark .admin-stat-num    { color: #fafafa; }
body.dark .admin-stat-label  { color: #71717a; }

body.dark .admin-card        { background: #1c1c1f; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body.dark .admin-card-header { border-bottom-color: #3f3f46; }
body.dark .admin-card-title  { color: #fafafa; }
body.dark .admin-card-sub    { color: #71717a; }
body.dark .admin-badge       { background: #27272a; color: #a1a1aa; }

body.dark .admin-btn         { background: #27272a; border-color: #3f3f46; color: #a1a1aa; }
body.dark .admin-btn:hover   { background: #3f3f46; color: #fafafa; }
body.dark .admin-btn.primary { background: #fafafa; color: #09090b; border-color: #fafafa; }

body.dark .report-row        { border-bottom-color: #3f3f46; }
body.dark .report-row-name   { color: #fafafa; }
body.dark .report-row-meta   { color: #71717a; }

body.dark .graph-row         { border-bottom-color: #3f3f46; }
body.dark .graph-row-name    { color: #fafafa; }

body.dark .pending-card      { background: #1c1c1f; border-color: #3f3f46; }
body.dark .pending-label     { color: #71717a; }
body.dark .pending-value     { color: #e4e4e7; }

body.dark .admin-empty       { color: #71717a; }

/* =================================================================
   GLASS THEME - Changelog page
   ================================================================= */
[data-theme="glass"] .cl-back        { color: rgba(255,255,255,.55); }
[data-theme="glass"] .cl-back:hover  { color: #fff; }

[data-theme="glass"] .cl-title       { color: #fff; }
[data-theme="glass"] .cl-version-badge { color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); }
[data-theme="glass"] .cl-icon        { background: rgba(255,255,255,.12); }
[data-theme="glass"] .cl-icon svg    { stroke: #fff; }

[data-theme="glass"] .cl-publish-check {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: var(--gbl);
}

[data-theme="glass"] .cl-ver         {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  backdrop-filter: var(--gbl);
}
[data-theme="glass"] .cl-ver.current {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
[data-theme="glass"] .cl-date        { color: rgba(255,255,255,.45); }

[data-theme="glass"] .cl-card        {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
  backdrop-filter: var(--gbl);
}
[data-theme="glass"] .cl-item        { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="glass"] .cl-item-text   { color: rgba(255,255,255,.88); }
[data-theme="glass"] .cl-item-tag    { color: rgba(255,255,255,.45); }

/* =================================================================
   GLASS THEME - Admin pages
   ================================================================= */
[data-theme="glass"].admin-page      { background: var(--gb); }

[data-theme="glass"] .admin-header   {
  background: rgba(20,20,28,.6);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: var(--gbl);
}
[data-theme="glass"] .admin-brand       { color: #fff; }
[data-theme="glass"] .admin-nav-link    { color: rgba(255,255,255,.55); }
[data-theme="glass"] .admin-nav-link:hover  { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="glass"] .admin-nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
[data-theme="glass"] .admin-header-btn  { color: rgba(255,255,255,.6); }
[data-theme="glass"] .admin-header-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

[data-theme="glass"] .admin-hero h1  { color: #fff; }
[data-theme="glass"] .admin-hero p   { color: rgba(255,255,255,.55); }

[data-theme="glass"] .admin-stat     {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: var(--gbl);
  box-shadow: var(--gsh);
}
[data-theme="glass"] .admin-stat-num    { color: #fff; }
[data-theme="glass"] .admin-stat-label  { color: rgba(255,255,255,.5); }

[data-theme="glass"] .admin-card     {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: var(--gbl);
  box-shadow: var(--gsh);
}
[data-theme="glass"] .admin-card-header { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="glass"] .admin-card-title  { color: #fff; }
[data-theme="glass"] .admin-card-sub    { color: rgba(255,255,255,.5); }
[data-theme="glass"] .admin-badge       { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

[data-theme="glass"] .admin-btn      {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}
[data-theme="glass"] .admin-btn:hover   { background: rgba(255,255,255,.18); color: #fff; }
[data-theme="glass"] .admin-btn.primary { background: rgba(255,255,255,.9); color: #09090b; }

[data-theme="glass"] .report-row     { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="glass"] .report-row-name  { color: #fff; }
[data-theme="glass"] .report-row-meta  { color: rgba(255,255,255,.45); }

[data-theme="glass"] .graph-row      { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="glass"] .graph-row-name { color: #fff; }

[data-theme="glass"] .pending-card   {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
}
[data-theme="glass"] .pending-label  { color: rgba(255,255,255,.5); }
[data-theme="glass"] .pending-value  { color: rgba(255,255,255,.88); }

[data-theme="glass"] .admin-empty    { color: rgba(255,255,255,.4); }

/* Changelog page body background (controlled from here so dark/glass can override) */
body.cl-page                     { background: #f4f4f5; }
body.dark.cl-page                { background: #0e0e14; }
[data-theme="glass"].cl-page     { background: linear-gradient(135deg, rgba(14,14,28,.88) 0%, rgba(20,20,40,.92) 100%); }

/* =================================================================
   ADMIN REDESIGN — Novos componentes
   ================================================================= */

/* 4-col stats grid */
.admin-stats-4 { grid-template-columns: repeat(4, 1fr); }
.admin-stat.admin-stat-link { cursor: pointer; transition: box-shadow .15s; }
.admin-stat.admin-stat-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.admin-stat-num.blue { color: #2563eb; }

/* Tabs */
/* ─── Section tabs (admin SPA main nav) ─── */
.section-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--br2);
  box-shadow: var(--sh-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: max-content;
  padding: 10px 16px;
  border-radius: 11px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx3);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  justify-content: center;
}
.section-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.section-tab:hover { background: var(--surface2); color: var(--tx2); }
.section-tab.active {
  background: var(--tx);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
}
.section-badge.hidden { display: none; }
.section-tab.active .section-badge { background: #fff; color: #ef4444; }

.tab-section { animation: tabFade .2s ease; }
.tab-section.hidden { display: none; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Admin brand tag */
.admin-brand-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 7px;
  margin-left: 6px;
  border-radius: 6px;
  background: var(--tx);
  color: #fff;
}

.admin-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, color .1s;
  position: relative;
}
.admin-tab:hover { background: var(--surface2); color: var(--tx); }
.admin-tab.active { background: var(--tx); color: #fff; font-weight: 600; }

.tab-dot {
  display: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
}
.admin-tab.active .tab-dot { background: rgba(255,255,255,.8); }

/* Search */
.admin-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.admin-search-wrap svg { width: 14px; height: 14px; color: var(--tx3); flex-shrink: 0; }
.admin-search {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--tx);
  outline: none;
}
.admin-search::placeholder { color: var(--tx3); }

/* Report row right side */
.report-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.report-row-note {
  display: block;
  font-size: 11px;
  color: var(--tx3);
  font-style: italic;
  margin-top: 2px;
}

.resolved-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-d);
  white-space: nowrap;
}

/* Fountain list */
.fountain-list { display: grid; }

.fountain-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .1s;
}
.fountain-row:last-child { border-bottom: none; }
.fountain-row:hover { background: #faf9f7; }

.fountain-row-main { flex: 1; min-width: 0; }

.fountain-row-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fountain-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.fountain-row-meta {
  font-size: 11px;
  color: var(--tx3);
}

/* Feature chip */
.feat-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--tx2);
  background: var(--surface2);
  border-radius: var(--r-f);
  padding: 2px 7px;
}

/* Report counts */
.fountain-row-counts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.count-ok { font-size: 12px; font-weight: 600; color: var(--green-d); }
.count-ko { font-size: 12px; font-weight: 600; color: var(--red-d); }

/* Fountain row actions */
.fountain-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Status toggle (OK / KO buttons) */
.status-toggle {
  display: flex;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--br2);
}
.st-btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--tx3);
  transition: background .1s, color .1s;
}
.st-btn:not(.active):hover { background: var(--surface2); color: var(--tx); }
.st-btn.ok.active { background: var(--green-bg); color: var(--green-d); }
.st-btn.ko.active { background: var(--red-bg);   color: var(--red-d); }

/* Delete button */
.del-btn {
  color: var(--tx3) !important;
  border-color: transparent !important;
}
.del-btn:hover { color: var(--red-d) !important; border-color: var(--red-bg) !important; background: var(--red-bg) !important; }
.del-btn svg { width: 12px; height: 12px; }

/* Delete modal */
.del-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: grid;
  place-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.del-modal.hidden { display: none; }
.del-modal-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.del-modal-title { font-size: 16px; font-weight: 800; color: var(--tx); margin-bottom: 6px; }
.del-modal-sub   { font-size: 14px; font-weight: 600; color: var(--tx2); margin-bottom: 8px; }
.del-modal-warn  { font-size: 12px; color: var(--tx3); margin-bottom: 20px; }
.del-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.admin-btn.danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.admin-btn.danger:hover { background: #dc2626; border-color: #dc2626; }

/* Pending redesign */
.pending-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pending-date {
  font-size: 10px;
  color: var(--tx3);
  font-weight: 500;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.pending-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pending-confirm-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 4px;
}
.pending-confirm-form.hidden { display: none; }
.pending-label { font-size: 11px; font-weight: 600; color: var(--tx3); }
.pending-name-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--br2);
  border-radius: var(--r);
  font-family: inherit;
  font-size: 13px;
  color: var(--tx);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .12s;
}
.pending-name-input:focus { outline: none; border-color: var(--tx); }
.pending-confirm-actions { display: flex; gap: 6px; }

/* Toast error variant */
.toast-error { background: var(--red) !important; }

/* =================================================================
   DARK — new components
   ================================================================= */
body.dark .admin-tab        { color: #71717a; }
body.dark .admin-tab:hover  { background: #27272a; color: #fafafa; }
body.dark .admin-tab.active { background: #fafafa; color: #09090b; }

body.dark .section-tabs    { background: #1c1c1f; border-color: #3f3f46; }
body.dark .section-tab     { color: #71717a; }
body.dark .section-tab:hover { background: #27272a; color: #d4d4d8; }
body.dark .section-tab.active { background: #fafafa; color: #09090b; }
body.dark .admin-brand-tag { background: #fafafa; color: #09090b; }

body.dark .admin-search-wrap { border-bottom-color: #3f3f46; }
body.dark .admin-search      { color: #fafafa; }
body.dark .admin-search::placeholder { color: #52525b; }
body.dark .admin-tabs        { border-bottom-color: #3f3f46; }

body.dark .fountain-row:hover  { background: #1c1c1f; }
body.dark .fountain-row        { border-bottom-color: #3f3f46; }
body.dark .fountain-row-name   { color: #fafafa; }
body.dark .fountain-row-meta   { color: #52525b; }
body.dark .feat-chip           { background: #27272a; color: #a1a1aa; }

body.dark .status-toggle       { border-color: #3f3f46; }
body.dark .st-btn              { color: #52525b; }
body.dark .st-btn:not(.active):hover { background: #27272a; color: #a1a1aa; }

body.dark .del-modal-card { background: #1c1c1f; }
body.dark .del-modal-title { color: #fafafa; }
body.dark .del-modal-sub   { color: #a1a1aa; }
body.dark .del-modal-warn  { color: #71717a; }

body.dark .pending-name-input { background: #27272a; border-color: #3f3f46; color: #fafafa; }
body.dark .pending-name-input:focus { border-color: #fafafa; }
body.dark .pending-header-row .pending-date { color: #52525b; }

body.dark .report-row:hover { background: #1c1c1f; }
body.dark .report-row       { border-bottom-color: #3f3f46; }
body.dark .report-row-note  { color: #52525b; }

/* =================================================================
   GLASS — new components
   ================================================================= */
[data-theme="glass"] .admin-tab        { color: rgba(255,255,255,.45); }
[data-theme="glass"] .admin-tab:hover  { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="glass"] .admin-tab.active { background: rgba(255,255,255,.18); color: #fff; }

[data-theme="glass"] .section-tabs    { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
[data-theme="glass"] .section-tab     { color: rgba(255,255,255,.6); }
[data-theme="glass"] .section-tab:hover { background: rgba(255,255,255,.1); color: #fff; }
[data-theme="glass"] .section-tab.active { background: rgba(255,255,255,.95); color: #111; }
[data-theme="glass"] .admin-brand-tag { background: rgba(255,255,255,.9); color: #111; }

[data-theme="glass"] .admin-search-wrap { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="glass"] .admin-search      { color: #fff; }
[data-theme="glass"] .admin-search::placeholder { color: rgba(255,255,255,.3); }
[data-theme="glass"] .admin-tabs        { border-bottom-color: rgba(255,255,255,.08); }

[data-theme="glass"] .fountain-row:hover { background: rgba(255,255,255,.04); }
[data-theme="glass"] .fountain-row       { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="glass"] .fountain-row-name  { color: #fff; }
[data-theme="glass"] .feat-chip          { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

[data-theme="glass"] .status-toggle { border-color: rgba(255,255,255,.15); }
[data-theme="glass"] .st-btn        { color: rgba(255,255,255,.35); }
[data-theme="glass"] .st-btn:not(.active):hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }

[data-theme="glass"] .del-modal-card {
  background: rgba(20,20,28,.85);
  backdrop-filter: var(--gbl);
  border: 1px solid rgba(255,255,255,.12);
}
[data-theme="glass"] .del-modal-title { color: #fff; }
[data-theme="glass"] .del-modal-sub   { color: rgba(255,255,255,.7); }
[data-theme="glass"] .del-modal-warn  { color: rgba(255,255,255,.4); }

[data-theme="glass"] .pending-name-input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

[data-theme="glass"] .report-row:hover { background: rgba(255,255,255,.04); }
[data-theme="glass"] .report-row       { border-bottom-color: rgba(255,255,255,.07); }

/* Mobile: stack fountain rows */
@media (max-width: 640px) {
  .admin-stats-4 { grid-template-columns: repeat(2, 1fr); }

  .fountain-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .fountain-row-counts  { align-self: flex-start; }
  .fountain-row-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

  .report-row-right { flex-direction: column; align-items: flex-end; gap: 6px; }
}

/* ─── Definições ──────────────────────────────────────────────────────────── */
/* Cores definidas explicitamente por tema — o dark/glass não redefinem as
   variáveis --tx/--bg, por isso aqui usamos valores literais com fallback por tema. */
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 300px;
  height: 100%;
  background: #ffffff;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.1);
  transform: translateX(0);
  transition: transform .25s ease;
}
.settings-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #ececec;
  flex-shrink: 0;
}
.settings-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #09090b;
}
.settings-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #a1a1aa;
  display: flex;
  align-items: center;
  border-radius: 6px;
  line-height: 0;
  transition: color .12s;
}
.settings-close-btn svg { width: 14px; height: 14px; }
.settings-close-btn:hover { color: #09090b; }
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0 12px;
}
.settings-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #a1a1aa;
  padding: 0 18px;
  margin: 0 0 6px;
}
.settings-group {
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  margin-bottom: 28px;
}
.settings-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: none;
  border: none;
  border-top: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.settings-opt:not(:first-child) { border-top-color: #ececec; }
.settings-opt:hover { background: #f6f6f6; }
.settings-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f0f0;
  flex-shrink: 0;
  color: #52525b;
}
.settings-opt-icon svg { width: 15px; height: 15px; }
.settings-opt-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #09090b;
}
.settings-opt-check {
  width: 15px;
  height: 15px;
  color: #3b82f6;
  opacity: 0;
  flex-shrink: 0;
}
.settings-opt.active .settings-opt-check { opacity: 1; }
.settings-opt.active .settings-opt-label { color: #3b82f6; }

/* Dark */
body.dark .settings-panel          { background: #18181b; }
body.dark .settings-header         { border-bottom-color: #2e2e35; }
body.dark .settings-title          { color: #fafafa; }
body.dark .settings-group-title    { color: #71717a; }
body.dark .settings-group          { border-color: #2e2e35; }
body.dark .settings-opt:not(:first-child) { border-top-color: #2e2e35; }
body.dark .settings-opt:hover      { background: #27272a; }
body.dark .settings-opt-icon       { background: #3f3f46; color: #d4d4d8; }
body.dark .settings-opt-label      { color: #e4e4e7; }
body.dark .settings-opt.active .settings-opt-label { color: #60a5fa; }
body.dark .settings-opt.active .settings-opt-check { color: #60a5fa; }
body.dark .settings-close-btn      { color: #a1a1aa; }
body.dark .settings-close-btn:hover { color: #fafafa; }

/* Glass — scopar ao body; os botões têm data-theme próprio que não deve ativar estas regras */
body[data-theme="glass"] .settings-header { border-bottom-color: var(--gbr); }
body[data-theme="glass"] .settings-title  { color: var(--gtx); }
body[data-theme="glass"] .settings-group-title { color: var(--gtx3); }
body[data-theme="glass"] .settings-group  { border-color: var(--gbr); }
body[data-theme="glass"] .settings-opt:not(:first-child) { border-top-color: var(--gbr); }
body[data-theme="glass"] .settings-opt:hover { background: rgba(255,255,255,.08); }
body[data-theme="glass"] .settings-opt-label { color: var(--gtx); }
body[data-theme="glass"] .settings-opt-icon  { background: rgba(255,255,255,.14); color: var(--gtx); }
body[data-theme="glass"] .settings-opt.active .settings-opt-label { color: #93c5fd; }
body[data-theme="glass"] .settings-opt.active .settings-opt-check { color: #93c5fd; }
body[data-theme="glass"] .settings-close-btn { color: var(--gtx2); }
body[data-theme="glass"] .settings-close-btn:hover { color: var(--gtx); }

/* ─── Zoom hint ─────────────────────────────────────────── */
.zoom-hint {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 300;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  animation: zoom-hint-in 0.2s ease;
}
.zoom-hint.hidden { display: none; }
@keyframes zoom-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}