:root {
  --bg: #171717;
  --panel: #202020;
  --line: #393939;
  --text: #f1f1f1;
  --muted: #aaa;
  --cyan: #4db9e8;
  --gold: #ffdd57;
  --red: #ff3860;
  font-family: "Segoe UI", Arial, sans-serif;
}

body { background: #171717; }
.app { grid-template-columns: 364px minmax(0, 1fr); }
.sidebar { background: #202020; border-right: 1px solid #414141; }
.sidebar-header { padding: 20px 20px 14px; }
.sidebar-header .brand { display: block; width: 216px; height: 90px; margin: 0 auto; }
.sidebar-header .brand img { display: block; width: 216px; }
.eyebrow { width: 184px; margin: -8px 0 0 calc(50% - 105px); transform: translateX(-2px); text-align: left; color: #f1f1f1; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .025em; white-space: nowrap; }
.sidebar h1.eyebrow { margin: -8px 0 0 calc(50% - 105px); font-size: 15px; line-height: normal; letter-spacing: .025em; }
.stats { margin-top: 18px; padding: 14px 4px; border-color: #454545; }
.stats strong { font-size: 22px; font-weight: 400; }
.stats span { color: #a9a9a9; font-size: 10px; letter-spacing: .02em; font-weight: 400; }
.browser-controls { padding: 14px 15px 0; }
.search-wrap { height: 36px; padding: 0 9px; background: #2c2c2c; border: 1px solid #525252; border-radius: 2px; }
.search-wrap:focus-within { border-color: #4db9e8; }
.search-icon { color: #bdbdbd; }
.search-wrap input { color: #f5f5f5; font-size: 12px; }
.search-wrap input::placeholder { color: #a6a6a6; }
.filters { gap: 3px; margin-top: 8px; }
.filter { color: #c5c5c5; padding: 6px 9px; border: 1px solid #4b4b4b; border-radius: 2px; background: #292929; font-size: 11px; font-weight: 500; }
.filter:hover, .filter:focus-visible { color: #fff; border-color: #68c6ed; }
.filter.active { color: #fff; background: #286b8d; border-color: #4db9e8; }
.results-heading { padding: 13px 4px 9px; color: #aaa; border-color: #444; }
.feed-state { color: #7ac8eb; }
.receiver-list { scrollbar-color: #575757 #252525; }
.receiver-card { padding: 11px 18px; border-color: #3a3a3a; }
.receiver-card:hover, .receiver-card:focus-visible, .receiver-card.selected { background: #333; }
.receiver-card.selected { box-shadow: inset 3px 0 #4db9e8; }
.card-name { color: #f1f1f1; font-size: 12px; font-weight: 600; }
.card-device { color: #ccc; border-color: #555; border-radius: 2px; font-weight: 500; }
.card-location, .card-meta { color: #aaa; }
.country-flag { display: inline-block; width: 16px; height: 12px; margin-right: 5px; object-fit: cover; vertical-align: -2px; }
.card-meta { color: #d0d0d0; }
.card-meta span { color: #aaa; }
.status-dot, .status-dot.busy, .status-dot.unreachable { box-shadow: none; }
.sidebar-footer { padding: 11px 18px; color: #999; border-color: #444; }
.sidebar-footer code { color: #c7c7c7; }
.live-dot { background: #4db9e8; box-shadow: none; }

.stage { background: #151515; }
.stage::before { display: none; }
.stage-top { top: 12px; left: auto; right: 16px; min-height: 0; padding: 0; background: none; border: 0; }
.stage-kicker { color: #e4e4e4; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.download-link { padding: 6px 10px; color: #eee; background: #363636; border-color: #575757; border-radius: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.download-link:hover { color: #fff; border-color: #4db9e8; background: #3b3b3b; }
#globe, #globe * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#globe .marker:focus { outline: none; }
#globe .marker:focus-visible .marker-ring { stroke-width: 3px; }
#globe .marker-count { pointer-events: none; }
.marker-glow { opacity: 0; }
.marker-ring { opacity: .9; stroke-width: 1.5px; }
.marker-core { stroke: #101010; stroke-width: 1.3px; }
.marker.selected .marker-ring { stroke-width: 2.5px; }
.marker-count { fill: #161616; font-size: 10px; font-weight: 700; }
.globe-caption { left: 17px; bottom: 15px; color: #b0b0b0; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.caption-sep { color: #777; margin: 0 4px; }
.map-controls { top: 58px; right: 14px; gap: 3px; }
.map-controls button { width: 32px; height: 32px; color: #eee; background: #303030; border-color: #5a5a5a; border-radius: 2px; }
.map-controls button:hover, .map-controls button:focus-visible { color: #fff; border-color: #4db9e8; }
.legend { right: 17px; bottom: 15px; color: #ccc; font-size: 11px; }

.receiver-detail, .hover-panel, .load-error { color: #eee; background: #252525f7; border: 1px solid #696969; border-radius: 3px; box-shadow: 0 8px 24px #0008; backdrop-filter: none; }
.hover-bridge { position: absolute; z-index: 4; background: transparent; }
.hover-bridge[hidden] { display: none; }
.hover-close { position: absolute; top: 8px; right: 9px; width: 25px; height: 25px; border: 0; background: transparent; color: #bbb; font-size: 21px; line-height: 1; padding: 0; }
.hover-close:hover, .hover-close:focus-visible { color: #fff; outline: 1px solid #888; }
.hover-kicker { padding-right: 29px; }
.receiver-detail { right: 17px; bottom: 46px; }
.detail-location { color: #aaa; }
.detail-grid, .detail-description, .hover-grid, .hover-description { border-color: #555; }
.detail-grid span, .detail-description span, .hover-grid span, .hover-description span { color: #aaa; letter-spacing: .03em; }
.detail-grid strong, .hover-grid strong { color: #f1f1f1; }
.detail-description p, .hover-description p { color: #d0d0d0; }
.detail-action, .hover-zoom { color: #fff; background: #286b8d; border: 1px solid #4db9e8; border-radius: 2px; }
.detail-action:hover, .hover-zoom:hover, .hover-zoom:focus-visible { color: #fff; background: #3586ad; }
.hover-options { scrollbar-color: #666 #292929; touch-action: pan-y; }
.hover-option { border-color: #494949; }
.hover-option:hover, .hover-option:focus-visible { background: #3b3b3b; }
.hover-address, .hover-device { color: #c5c5c5; }
.load-error span { color: #bbb; }
.load-error button { color: #fff; background: #286b8d; border-radius: 2px; }

.card-top { align-items: center; gap: 11px; }
.card-name { flex: 1; }
.card-device { align-self: center; }
.card-location, .card-meta { margin-left: 47px; }
.receiver-avatar { --avatar-color: hsl(171, 100%, 41%); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 2px; border: 1px solid var(--avatar-color); border-radius: 4px; background: #222; box-shadow: 0 0 8px var(--avatar-color); overflow: hidden; }
.receiver-avatar.busy { --avatar-color: hsl(348, 100%, 61%); }
.receiver-avatar.unreachable { --avatar-color: hsl(48, 100%, 67%); }
.receiver-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.name-with-avatar { display: flex; align-items: center; gap: 11px; margin: 10px 0 7px; min-width: 0; }
.name-with-avatar h2, .name-with-avatar h3 { margin: 0; min-width: 0; }
.name-with-avatar .panel-avatar { width: 44px; height: 44px; }
.receiver-detail .detail-location { margin-left: 55px; }
.hover-panel .name-with-avatar { margin: 8px 0 13px; }
.hover-option { grid-template-columns: 24px minmax(65px, 1fr) 82px 112px; min-height: 42px; }
.hover-option .menu-avatar { width: 24px; height: 24px; padding: 1px; border-radius: 3px; box-shadow: 0 0 5px var(--avatar-color); }

@media (max-width: 900px) {
  .app { grid-template-columns: 315px minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .sidebar { border-top-color: #464646; }
  .sidebar-header { height: 0; padding: 0; }
  .sidebar-header .brand, .eyebrow { display: none; }
  .hover-option { grid-template-columns: 24px minmax(50px, 1fr) 70px 100px; }
  .stats { right: 12px; border: 0; margin: 0; padding: 0; text-shadow: 0 1px 3px #000; }
  .browser-controls { padding: 8px 10px 6px; }
  .receiver-card { padding-left: 10px; padding-right: 10px; }
  .results-heading, .globe-caption { display: none; }
  .search-wrap { height: 34px; }
  .stage-top { display: none; }
  .map-controls { top: 44px; right: 10px; }
  .legend { top: 10px; left: 10px; right: auto; bottom: auto; gap: 8px; font-size: 9px; z-index: 2; }
  .receiver-detail { right: 10px; bottom: 50px; }
}