* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0f1218; color: #e8ecf3;
  font: 16px/1.5 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
#app { height: 100%; }
.hidden { display: none !important; }
.screen { height: 100%; display: flex; flex-direction: column; }

#screen-auth { justify-content: center; gap: 14px; padding: 28px; max-width: 460px; margin: 0 auto; }
#screen-auth h1 { margin: 0; font-size: 34px; letter-spacing: 8px; }
#screen-auth .sub { margin: 0 0 10px; color: #93a0b5; font-size: 14px; }
#screen-auth label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #93a0b5; }
#screen-auth input { padding: 13px 14px; border-radius: 10px; border: 1px solid #2b3648;
  background: #171c25; color: #e8ecf3; font-size: 16px; }
#screen-auth input:focus { outline: none; border-color: #4c7dff; }
button { padding: 13px 16px; border-radius: 10px; border: 1px solid #2b3648;
  background: #1c2330; color: #e8ecf3; font-size: 15px; cursor: pointer; }
button:active { transform: scale(.98); }
#enter { background: #4c7dff; border-color: #4c7dff; font-size: 17px; padding: 15px; }
.tip { min-height: 20px; margin: 0; font-size: 13px; color: #ffb454; }

header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: #141922; border-bottom: 1px solid #232c3a; font-size: 14px; }
#who { font-weight: 600; }
#dist { color: #7fe0a8; font-variant-numeric: tabular-nums; }
#stat { width: 100%; margin-top: 4px; font-size: 12px; color: #8b98ad; }
#map { flex: 1; background: #0f1218; }
footer { display: flex; gap: 8px; padding: 10px; background: #141922; border-top: 1px solid #232c3a; }
footer button { flex: 1; padding: 11px 4px; font-size: 13px; }
footer button.on { background: #1f7a4d; border-color: #1f7a4d; }

#toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  max-width: 88%; padding: 9px 14px; border-radius: 20px; background: rgba(20,25,34,.92);
  border: 1px solid #2b3648; font-size: 13px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; }

.me-marker, .peer-marker { width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.me-marker { background: #4c7dff; }
.peer-marker { background: #ff6b6b; }
.tag { background: rgba(20,25,34,.9); color: #fff; border: 0; padding: 3px 8px; border-radius: 6px; font-size: 12px; }
.leaflet-container { font-family: inherit; }