.sr-pwl-livemap {
  --sr-pwl-bg:#061419;
  --sr-pwl-panel:#0b2026;
  --sr-pwl-panel-2:#102a31;
  --sr-pwl-line:rgba(176,233,222,.16);
  --sr-pwl-text:#edf8f4;
  --sr-pwl-muted:#9fb9b3;
  --sr-pwl-accent:#7ae0c3;
  --sr-pwl-gold:#f0d47b;
  width:100%; color:var(--sr-pwl-text); background:var(--sr-pwl-bg);
  border:1px solid var(--sr-pwl-line); border-radius:22px; overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.28); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.sr-pwl-livemap * { box-sizing:border-box; }
.sr-pwl-toolbar { min-height:70px; display:flex; align-items:center; gap:20px; padding:12px 16px; background:rgba(7,25,31,.95); border-bottom:1px solid var(--sr-pwl-line); }
.sr-pwl-server-state { display:flex; align-items:center; gap:11px; min-width:0; }
.sr-pwl-server-state > div { display:flex; flex-direction:column; min-width:0; }
.sr-pwl-server-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-pwl-status-text { color:var(--sr-pwl-muted); font-size:12px; }
.sr-pwl-status-dot { width:10px; height:10px; border-radius:50%; background:#8a9490; box-shadow:0 0 0 4px rgba(138,148,144,.08); flex:0 0 auto; }
.sr-pwl-livemap.is-online .sr-pwl-status-dot { background:var(--sr-pwl-accent); box-shadow:0 0 18px rgba(122,224,195,.65); }
.sr-pwl-livemap.is-error .sr-pwl-status-dot { background:#ff8276; box-shadow:0 0 18px rgba(255,130,118,.45); }
.sr-pwl-metrics { margin-left:auto; display:flex; gap:8px; align-items:center; }
.sr-pwl-metrics > span { padding:7px 10px; border:1px solid var(--sr-pwl-line); border-radius:999px; color:var(--sr-pwl-muted); font-size:12px; font-weight:750; background:rgba(255,255,255,.025); white-space:nowrap; }
.sr-pwl-controls { display:flex; gap:6px; }
.sr-pwl-controls button { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--sr-pwl-line); border-radius:10px; background:#10272e; color:var(--sr-pwl-text); font-size:19px; line-height:1; cursor:pointer; transition:.15s ease; }
.sr-pwl-controls button:hover { transform:translateY(-1px); color:#071612; background:var(--sr-pwl-accent); border-color:var(--sr-pwl-accent); }
.sr-pwl-error { padding:10px 16px; color:#ffd8d4; background:rgba(130,33,27,.78); border-bottom:1px solid rgba(255,130,118,.3); font-size:13px; }
.sr-pwl-stage { position:relative; height:var(--sr-pwl-height,680px); overflow:hidden; background:radial-gradient(circle at 50% 40%,#153941,#061419 72%); touch-action:none; cursor:grab; user-select:none; outline:none; }
.sr-pwl-stage.is-dragging { cursor:grabbing; }
.sr-pwl-stage:focus-visible { box-shadow:inset 0 0 0 2px var(--sr-pwl-accent); }
.sr-pwl-image-wrap { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.sr-pwl-map-image { display:block; width:auto; height:auto; max-width:none !important; pointer-events:none; -webkit-user-drag:none; }
.sr-pwl-marker-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sr-pwl-player-marker { position:absolute; z-index:5; width:26px; height:26px; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer; }
.sr-pwl-marker-core { position:absolute; inset:4px; border-radius:50% 50% 50% 12%; transform:rotate(-45deg); background:linear-gradient(135deg,var(--sr-pwl-accent),#ddfff4); border:2px solid rgba(255,255,255,.92); box-shadow:0 3px 14px rgba(0,0,0,.7), 0 0 14px rgba(122,224,195,.45); }
.sr-pwl-marker-core::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#0b2529; left:50%; top:50%; transform:translate(-50%,-50%); }
.sr-pwl-player-label { position:absolute; left:50%; top:30px; transform:translateX(-50%); padding:4px 7px; border-radius:8px; color:#fff; background:rgba(4,15,19,.88); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:800; line-height:1; white-space:nowrap; text-shadow:0 1px 2px #000; box-shadow:0 4px 14px rgba(0,0,0,.28); }
.sr-pwl-player-card { display:none; position:absolute; z-index:12; left:50%; bottom:38px; transform:translateX(-50%); width:max-content; min-width:160px; max-width:240px; padding:10px 12px; border-radius:12px; background:rgba(5,19,23,.97); border:1px solid rgba(122,224,195,.3); box-shadow:0 14px 40px rgba(0,0,0,.5); color:var(--sr-pwl-text); font-size:12px; }
.sr-pwl-player-marker.is-open .sr-pwl-player-card { display:block; }
.sr-pwl-player-card strong { display:block; font-size:13px; margin-bottom:5px; color:#fff; }
.sr-pwl-player-meta { display:flex; flex-wrap:wrap; gap:5px 10px; color:var(--sr-pwl-muted); }
.sr-pwl-no-map { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px; text-align:center; color:var(--sr-pwl-muted); background:linear-gradient(rgba(122,224,195,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(122,224,195,.035) 1px,transparent 1px); background-size:40px 40px; }
.sr-pwl-no-map strong { color:var(--sr-pwl-text); font-size:20px; }
.sr-pwl-no-map-icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(122,224,195,.25); border-radius:18px; color:var(--sr-pwl-accent); font-size:32px; background:rgba(122,224,195,.06); }
.sr-pwl-loading { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; color:var(--sr-pwl-muted); background:rgba(3,13,17,.86); border:1px solid var(--sr-pwl-line); font-size:11px; z-index:20; pointer-events:none; }
.sr-pwl-loading span { width:7px; height:7px; border-radius:50%; background:var(--sr-pwl-accent); animation:sr-pwl-pulse 1s infinite alternate; }
.sr-pwl-livemap.has-data .sr-pwl-loading { display:none; }
.sr-pwl-footer { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 16px; color:var(--sr-pwl-muted); background:#07191e; border-top:1px solid var(--sr-pwl-line); font-size:11px; }
.sr-pwl-livemap:fullscreen { border:0; border-radius:0; width:100vw; height:100vh; }
.sr-pwl-livemap:fullscreen .sr-pwl-stage { height:calc(100vh - 113px); }
@keyframes sr-pwl-pulse { to { opacity:.25; transform:scale(.75); } }
@media (max-width:760px) {
  .sr-pwl-toolbar { flex-wrap:wrap; gap:9px; }
  .sr-pwl-metrics { order:3; margin-left:0; width:100%; }
  .sr-pwl-controls { margin-left:auto; }
  .sr-pwl-stage { height:min(var(--sr-pwl-height,680px),72vh); }
  .sr-pwl-player-label { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .sr-pwl-loading span { animation:none; } .sr-pwl-controls button { transition:none; } }