:root {
  --bg: #0b1016;
  --panel: rgba(10, 14, 20, 0.86);
  --panel-solid: #0f151d;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e6edf5;
  --muted: #8593a3;
  --up: #22c55e;
  --degraded: #f59e0b;
  --down: #ef4444;
  --unknown: #64748b;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
#map { position: fixed; inset: 0; z-index: 0; background: var(--bg); }

/* ---------- top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 68px; padding: 0 22px;
  background: linear-gradient(180deg, rgba(8, 11, 16, 0.95), rgba(8, 11, 16, 0.82));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.bar__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar__title h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { width: 10px; height: 10px; border-radius: 50%; background: var(--unknown); flex: none; }
.live.is-ok { background: var(--up); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: live 2s infinite; }
.live.is-bad { background: var(--down); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.chips { display: flex; gap: 10px; }
.chip { display: flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.chip__n { font-family: var(--mono); font-size: 28px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.chip__l { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.chip--up .chip__n { color: var(--up); }
.chip--degraded .chip__n { color: var(--degraded); }
.chip--down .chip__n { color: var(--down); }
.chip--down.is-alert { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.55); animation: alert 1.4s ease-in-out infinite; }
.chip--down.is-alert .chip__l { color: #fecaca; }
@keyframes alert { 50% { background: rgba(239, 68, 68, 0.32); } }

.bar__right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.updated { font-size: 13px; color: var(--muted); white-space: nowrap; }
.updated.is-bad { color: var(--down); font-weight: 600; }
.clock { font-family: var(--mono); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- banner */
.banner {
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 21;
  max-width: min(900px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 8px;
  background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.5); color: #fde68a; font-size: 14px;
}
.banner.is-error { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.55); color: #fecaca; }
.banner.is-info { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.5); color: #bfdbfe; }

/* ---------- markers */
.mk-layer { position: absolute; left: 0; top: 0; }
.mk { position: absolute; left: 0; top: 0; width: 0; height: 0; cursor: pointer; --c: var(--unknown); z-index: 1; }
.mk--up { --c: var(--up); }
.mk--degraded { --c: var(--degraded); z-index: 3; }
.mk--down { --c: var(--down); z-index: 4; }
.mk--sel { z-index: 6; }
.mk:hover { z-index: 7; }
.mk__dot {
  position: absolute; width: 14px; height: 14px; left: -7px; top: -7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px rgba(8, 11, 16, 0.92), 0 0 12px var(--c);
}
.mk--down .mk__dot { width: 18px; height: 18px; left: -9px; top: -9px; }
.mk--sel .mk__dot { box-shadow: 0 0 0 2px #fff, 0 0 14px var(--c); }
.mk__pulse { display: none; position: absolute; width: 18px; height: 18px; left: -9px; top: -9px; border-radius: 50%; border: 2px solid var(--down); animation: pulse 1.6s ease-out infinite; }
.mk--down .mk__pulse { display: block; }
@keyframes pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }

.mk__label {
  position: absolute; left: 12px; top: -12px; height: 24px;
  display: flex; align-items: center; gap: 8px; padding: 0 9px 0 8px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 4px;
  font-size: 12.5px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.mk--left .mk__label { left: auto; right: 12px; border-left: 1px solid var(--line); border-right: 3px solid var(--c); }
.mk--down .mk__label { background: rgba(60, 12, 12, 0.92); border-color: rgba(239, 68, 68, 0.6); }
.mk--nolabel .mk__label { visibility: hidden; }
.mk--nolabel:hover .mk__label { visibility: visible; }
.mk__name { font-weight: 600; color: var(--text); }
.mk__meta { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: #b8c4d1; }
.mk--degraded .mk__meta { color: var(--degraded); }
.mk--down .mk__meta { color: #fca5a5; font-weight: 600; }

/* ---------- alerts panel */
.alerts {
  position: fixed; left: 16px; bottom: 16px; z-index: 15; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px);
  overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px);
}
.alerts:empty { display: none; }
.alerts__head { padding: 11px 14px 8px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.alerts ul { list-style: none; margin: 0; padding: 0 6px 6px; }
.al { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.al:hover { background: rgba(255, 255, 255, 0.05); }
.al__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.al--down { --c: var(--down); }
.al--degraded { --c: var(--degraded); }
.al--unknown { --c: var(--unknown); }
.al__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al__why { grid-column: 2 / 4; font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.al__since { font-family: var(--mono); font-size: 12.5px; color: var(--c); }
.alerts__ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--up); }
.alerts__ok::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); }
.alerts__foot { padding: 9px 14px 11px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- detail card */
.detail {
  position: fixed; right: 16px; bottom: 16px; z-index: 16; width: 360px; max-width: calc(100vw - 32px);
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.detail h2 { margin: 6px 0 2px; font-size: 18px; }
.detail__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.detail__x:hover { color: var(--text); }
.detail__status { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: #0b1016; background: var(--c); }
.detail__model { font-size: 12.5px; color: var(--muted); }
.detail__reason { margin: 10px 0 0; font-size: 13px; color: var(--c); }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 13px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.detail--up { --c: var(--up); }
.detail--degraded { --c: var(--degraded); }
.detail--down { --c: var(--down); }
.detail--unknown { --c: var(--unknown); }

/* ---------- Leaflet / OpenStreetMap */
.leaflet-container { background: var(--bg); font-family: var(--sans); }
/* Dark theme: real OSM tiles, recoloured in the browser (no third-party tile styling service) */
.tiles-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(0.88) contrast(0.92) saturate(0.55); }
.leaflet-control-attribution { background: rgba(8, 11, 16, 0.75) !important; color: #6f7d8d !important; font-size: 10.5px; }
.leaflet-control-attribution a { color: #8fa3b8 !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--panel-solid); color: var(--text); border-bottom-color: var(--line); }
.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: none !important; }
.leaflet-control-zoom { margin-right: 16px !important; margin-top: 84px !important; }
.mk { will-change: transform; }

@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr auto; height: auto; padding: 10px 16px; }
  .bar__right { display: none; }
  .chip { padding: 4px 10px; } .chip__n { font-size: 20px; } .chip__l { font-size: 11px; }
  .alerts { width: auto; right: 16px; max-height: 40vh; }
}