:root{
  --bg1:#0b1220;
  --bg2:#121a2b;
  --card:rgba(255,255,255,.08);
  --cardBorder:rgba(255,255,255,.12);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.75);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 20% 10%, #1f3b7a55 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 10%, #7a1f5b55 0%, transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

.header{
  text-align:center;
  padding:42px 16px 18px;
}

.header h1{
  margin:0;
  font-size:36px;
  letter-spacing:.4px;
}

.header p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

.map-wrapper{
  width:min(1100px, 92vw);
  margin: 24px auto 60px;
  padding: 20px;
  border:1px solid var(--cardBorder);
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  position:relative;
}

.map-wrapper svg{
  width:100%;
  height:auto;
  display:block;
}

.map-wrapper path{
  fill:#e6e6e6;
  stroke:#9c9c9c;
  stroke-width:1;
  cursor:pointer;
  transition: transform .12s ease, fill .12s ease, filter .12s ease;
  transform-origin:center;
}

.map-wrapper path:hover{
  filter: brightness(0.98) saturate(1.1);
  transform: translateY(-1px);
}

.map-wrapper path.is-selected{
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

#tooltip{
  position:absolute;
  display:none;
  pointer-events:none;
  background: rgba(0,0,0,.85);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  transform: translateZ(0);
}

@media (max-width: 600px){
  .header h1{font-size:26px;}
  .map-wrapper{padding:14px;}
}
.map-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 30px auto;
}

#tr-map {
  width: 100%;
  height: 520px;
  display: block;
}

#tooltip {
  position: absolute;
  display: none;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  pointer-events: none;
  z-index: 9999;
}