body {
  margin:0;
  background:#0f1117;
  color:#e6e6e6;
  font-family: 'Segoe UI', sans-serif;
}

#topbar {
  padding:10px 20px;
  background:#1a1d26;
  border-bottom:1px solid #2a2f3a;
}

#container {
  display:flex;
  height:calc(100vh - 40px);
}

#sidebar {
  width:200px;
  background:#151821;
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-right:1px solid #2a2f3a;
}

#sidebar button {
  background:#1f2430;
  border:none;
  padding:10px;
  border-radius:8px;
  color:#ccc;
  cursor:pointer;
  transition:0.2s;
}

#sidebar button:hover {
  background:#2a3040;
  transform:translateY(-2px);
}

#panel {
  position:absolute;
  right:15px;
  top:60px;
  width:260px;
  background:#1a1d26;
  border:1px solid #2a2f3a;
  border-radius:10px;
  padding:12px;
}

canvas {
  flex:1;
}

#popup {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#1a1d26;
  border-radius:10px;
  padding:15px;
  border:1px solid #2a2f3a;
  display:none;
}