:root{--blue:#3A9BDC;--bg:#0E1621;--toolbar:#ffffffdd}
html,body{margin:0;height:100%;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#fff}
#map{height:100%}
/* Top bar */
.top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;z-index:1000}
#search{flex:1 1 260px;padding:8px 12px;border-radius:20px;border:none;font-size:14px}
.logo{font-size:26px;font-weight:800;margin:0 20px}
.logo .x{color:#d33;font-size:30px;margin:0 2px}
/* Menu button */
#menuBtn{position:absolute;top:20px;right:10px;width:48px;height:48px;border-radius:50%;background:var(--toolbar);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000}
#menuBtn i{font-size:26px;color:#333}
/* Toolbar */
#toolbar{position:absolute;top:70px;right:10px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.tool-btn{position:relative;width:50px;height:50px;border:2px solid #fff;border-radius:50%;background:var(--toolbar);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}
.tool-btn i{font-size:22px;color:#333}
.tool-btn.active{transform:scale(1.12);border-color:var(--blue)}
/* bulină albastră */
.tool-btn::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-radius:50%;background:var(--blue);transition:.2s}
.tool-btn.active::after{width:8px;height:8px}
/* Responsive */
@media(max-width:600px){
 #toolbar{right:4px}
 .tool-btn{width:40px;height:40px}
 #menuBtn{width:42px;height:42px}
 #search{flex:1 1 180px}
}