.online-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.online-tabs button { padding-inline: 4px; overflow-wrap: anywhere; }
.online-dialog.showing-map { width: min(860px, calc(100% - 28px)); }
.live-map-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.live-map-filters label { display: grid; gap: 5px; min-width: 0; color: #c5c0aa; font: 700 .7rem/1.3 Arial, sans-serif; }
.live-map-filters select { width: 100%; min-width: 0; height: 36px; border: 1px solid #626451; border-radius: 3px; padding: 0 6px; background: #151713; color: #eee8d0; font: 400 .8rem Arial, sans-serif; }
.live-map-filters select:disabled { opacity: .5; }
.live-map-filters select:focus-visible { outline: 2px solid var(--amber); }
.live-map-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 12px 0; font: 700 .7rem/1.3 Arial, sans-serif; color: #ded9c5; }
.live-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.live-map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.map-offline { background: #ff791f; }
.map-online { background: #52c879; }
.map-transmitting { background: #ee4149; }
.live-member-map { position: relative; isolation: isolate; width: 100%; height: min(52dvh, 470px); min-height: 240px; border: 1px solid #535647; background: #252c28; border-radius: 4px; }
.live-member-map .leaflet-tile-pane { filter: saturate(.55) brightness(.85); }
.live-member-map .leaflet-control-zoom a { background: #20251f; color: #eee8d0; border-color: #606254; }
.live-member-map .leaflet-control-attribution { background: #f6f6ed; color: #333; font-size: 10px; }
.live-member-map .leaflet-control-attribution a { color: #235872; }
.live-member-map .leaflet-popup-content { max-width: 230px; max-height: 230px; overflow-y: auto; overflow-wrap: anywhere; margin: 12px 16px; }
.live-map-pin { background: none; border: none; }
.live-map-dot { display: block; width: 16px; height: 16px; margin: 4px; border: 2px solid #ffcf9d; border-radius: 50%; background: #ff791f; box-shadow: 0 1px 5px #0008; }
.live-map-pin.is-online .live-map-dot { border-color: #cffadc; background: #229957; }
.live-map-pin.is-transmitting .live-map-dot { border-color: #ffe5e5; background: #e62332; animation: live-map-pulse 1.4s ease-in-out infinite; }
.live-map-pin:focus-visible { outline: 2px solid #252c28; border-radius: 50%; }
@keyframes live-map-pulse {
  0%, 100% { transform: scale(.85); box-shadow: 0 0 0 2px #e6233240; }
  50% { transform: scale(1.25); box-shadow: 0 0 0 6px #e6233228; }
}
.live-map-popup { display: grid; gap: 6px; color: #292d29; font: 400 .8rem/1.4 Arial, sans-serif; }
.live-map-popup strong { font-size: 1rem; }
.live-map-popup ul { margin: 2px 0 0; padding: 6px 0 0; border-top: 1px solid #ccc; list-style: none; }
.live-map-popup li { padding-block: 2px; }
.live-map-popup .online { color: #14723b; font-weight: 700; }
.live-map-popup .transmitting { color: #b51927; font-weight: 700; }
.live-map-status { margin: 10px 0 0; min-height: 18px; color: #c5c0aa; font: 400 .72rem/1.5 Arial, sans-serif; }
@media (max-width: 600px) {
  .live-map-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .online-dialog.showing-map .online-content { padding-inline: 12px; }
  .online-tabs { margin-inline: 12px; }
  .online-tabs button { font-size: .6rem; }
  .live-member-map { height: min(52dvh, calc(100dvh - 460px)); }
}
.live-map-members-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.live-map-members-toolbar button, .live-map-members-paging button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #76735a; border-radius: 5px; padding: 9px 12px; min-height: 40px; background: #292b21; color: #ffba54; font: 700 .75rem/1.3 Arial,sans-serif; cursor: pointer; }
.live-map-members-toolbar button:disabled { opacity: .45; cursor: default; }
.live-map-members-toolbar button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.live-map-members-toolbar small { flex: 1; color: #bbb69f; font: 400 .7rem/1.4 Arial,sans-serif; }
.live-map-members-dialog { margin: 0; width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 28px); }
.live-map-members-dialog[open] { display: flex; flex-direction: column; }
.live-map-members-dialog::backdrop { background: #000a; }
.live-map-members-dialog .report-head { flex-shrink: 0; padding: 18px 20px; }
.live-map-members-dialog .report-head h2 { overflow-wrap: anywhere; }
.live-map-members-body { padding: 16px 20px 20px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.live-map-members-body > p { color: #bfbba6; margin: 0 0 14px; font: 400 .78rem/1.5 Arial,sans-serif; }
.live-map-members-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: start; }
.map-member-card { min-width: 0; border: 1px solid #4a4c3e; border-radius: 6px; background: linear-gradient(145deg,#292c23,#171a15); overflow: hidden; }
.map-member-select { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 174px; padding: 14px 8px; border: 0; background: transparent; color: #eee5c9; cursor: pointer; font: 400 .8rem/1.3 Arial,sans-serif; }
.map-member-select strong { overflow-wrap: anywhere; max-width: 100%; }
.map-member-select small { color: #b8b49e; overflow-wrap: anywhere; max-width: 100%; }
.map-member-select[aria-expanded=true] { background: #3b3524; box-shadow: inset 0 -2px #d6a357; }
.map-member-portrait { position: relative; width: 80px; height: 80px; margin-bottom: 3px; }
.map-member-avatar { display: grid; place-items: center; width: 80px; height: 80px; overflow: hidden; border: 2px solid #92886a; border-radius: 50%; background: #34392d; }
.map-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.map-member-avatar svg { width: 52px; height: 52px; fill: none; stroke: #c5bea3; stroke-width: 1.5; }
.map-member-dot { position: absolute; right: 0; bottom: 2px; width: 15px; height: 15px; border: 2px solid #24281f; border-radius: 50%; background: #8b8b7e; }
.map-member-card.is-online .map-member-dot { background: #59d07c; box-shadow: 0 0 6px #57d27a80; }
.map-member-card.is-online .map-member-presence { color: #88db9f; }
.map-member-actions { padding: 10px 6px; }
.map-member-actions .message-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.map-member-actions button { flex: 0 0 38px; width: 38px; height: 38px; }
.live-map-members-paging { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.live-map-members-dialog button:focus-visible { box-shadow: inset 0 0 0 2px #e8e4d5; }
@media (max-width:600px) {
  .live-map-members-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .live-map-members-body { padding: 12px; }
  .live-map-members-toolbar { gap: 8px; }
}
@media (max-height:420px) {
  .live-map-members-dialog .report-head { padding: 10px 14px; }
  .live-map-members-body { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-map-pin.is-transmitting .live-map-dot { animation: none; box-shadow: 0 0 0 4px #e6233240; }
}

.live-map-members-dialog [hidden] { display: none !important; }
