:root { --bg:#0b1220; --card:#0f172a; --txt:#e5e7eb; --muted:#94a3b8; --accent:#38bdf8; --accent2:#22d3ee; --danger:#ef4444; --ok:#10b981 }

*{ box-sizing:border-box }

/* Layout */
body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  background:linear-gradient(180deg,var(--bg),#0f172a);
}
.container{ max-width:1000px; margin:0 auto; padding:20px; flex:1 } /* push footer down */

header{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 16px }
.brand{ display:flex; align-items:center; gap:10px; white-space:nowrap }
.brand h1{ color:var(--txt); font-size:20px; margin:0 }
.ver{ color:var(--muted); font-size:12px }

.grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px }
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }

.card{ background:var(--card); color:var(--txt); padding:18px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25) }

.row{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 }
.row .grow{ flex:1 }

button{ appearance:none; border:1px solid #1f2937; background:#0ea5e9; color:#fff; padding:12px 14px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer }
button.secondary{ background:#111827; color:#e5e7eb; border:1px solid #374151 }
button.success{ background:var(--ok); border-color:#065f46 }
button.danger { background:#7f1d1d; border-color:#991b1b }
.sm{ padding:8px 10px; border-radius:10px; font-size:13px }

.status{ margin-top:10px; color:var(--muted); font-size:14px; min-height:22px; white-space:pre-wrap }
.coords{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace }

.pill{ display:inline-flex; align-items:center; gap:8px; background:#0b3b50; color:#a8eaff; border:1px solid #073142; padding:6px 10px; border-radius:999px; font-size:12px }
.pill.ok{ background:#063b2e; color:#d1fae5; border-color:#065f46 }
.pill.warn{ background:#3b1f06; color:#fde68a; border-color:#92400e }
.pill.error{ background:#3b0b0b; color:#fecaca; border-color:#991b1b }

.list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; max-height:60vh; overflow:auto }
.item{ background:#0b1324; border:1px solid #1e293b; border-radius:14px; padding:12px; display:flex; gap:12px; align-items:flex-start }
.item .meta{ flex:1 }
.meta .top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.badge{ font-size:12px; color:#d1fae5; background:#064e3b; border:1px solid #065f46; border-radius:999px; padding:2px 8px }
.meta .when{ font-size:12px; color:var(--muted) }
.meta .latlng{ font-family:ui-monospace; margin-top:4px }
.actions{ display:flex; flex-wrap:wrap; gap:8px }

.empty{ color:var(--muted); font-size:14px; padding:10px 0 }
.footer-note{ color:var(--muted); font-size:12px; margin-top:12px; text-align:center }

input[type="text"]{ background:#0b1324; border:1px solid #1e293b; color:var(--txt); padding:10px; border-radius:10px; width:100% }

/* Export/import toolbar: single row, scrollable on mobile */
.toolbar{ display:flex; gap:8px; flex-wrap:nowrap; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch }

/* Quick chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ background:#0b3b50; color:#a8eaff; border:1px solid #073142; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; user-select:none }
.chip.active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9 }

.subtle{ color:var(--muted); font-size:12px }

/* Help (precise location how-to) */
details.help{ margin-top:8px }
details.help summary{ cursor:pointer; color:var(--accent); font-size:14px }
details.help .help-body{ color:var(--muted); font-size:13px; padding-top:6px }

/* Global footer */
.site-footer{
  text-align:center;
  font-size:14px;
  color:var(--muted);
  padding:15px 10px;
  border-top:1px solid #1e293b;
  background:transparent;
}
.site-footer a{ color:var(--muted); text-decoration:underline }