body{margin:0;padding:0;font-family:'Segoe UI',sans-serif;direction:rtl;overflow:hidden;background:#1a1a2e}
#map{position:absolute;top:0;bottom:0;left:0;right:0}
#toolbar{position:fixed;bottom:30px;right:20px;z-index:1000;display:flex;flex-direction:column-reverse;gap:8px}
#toolbar button{width:50px;height:50px;border-radius:50%;border:none;font-size:22px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;transition:0.2s}
#toolbar button:active{transform:scale(0.9)}
#btnAdd{background:#ffcc00;color:#1e1e24;font-weight:bold}
#btnAdd.active{background:#e74c3c;color:#fff}
#btnUndo{background:#7f8c8d;color:#fff;font-size:18px}
#btnUndo.cancel{background:#e74c3c;color:#fff}
#btnCompass{background:#2c3e50;color:#fff;font-size:20px}
#btnCompass.active{background:#e67e22;box-shadow:0 0 15px rgba(230,126,34,0.5)}
#btnSave{background:#2c3e50;color:#fff;font-size:18px}
#btnExport{background:#2c3e50;color:#fff;font-size:18px}
#infoBar{position:fixed;top:15px;right:15px;z-index:1000;background:rgba(0,0,0,0.55);color:#ffcc00;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:bold;box-shadow:0 2px 8px rgba(0,0,0,0.3);display:none;text-align:center;white-space:nowrap;backdrop-filter:blur(4px)}
#infoBox{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.97);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.3);z-index:2000;min-width:280px;max-width:90%;text-align:center}
#infoBox button{background:#2c3e50;color:#fff;border:none;padding:8px 20px;border-radius:5px;cursor:pointer;margin-top:8px;font-weight:bold;font-size:13px}
#infoContent{font-size:14px;color:#555;line-height:1.6}
.maplibregl-ctrl-top-right{top:60px!important;right:10px!important}
.maplibregl-ctrl-group button{width:36px!important;height:36px!important}